Stworzenie stałego "menu" podążającego za użytkownikiem

Question

Witam,

Nie mogę uporać się z stworzeniem "menu nawigacyjnego", które byłoby stałe i podążało za użytkownikiem. Takie menu chciałbym po lewej stronie ekranu... Wyglądałoby to mniej więcej tak jak na tej stronie: Link do strony.

Jak widzicie, jest nieruchomy "bar" po lewej stronie (wiem, że w tym przypadku to background... ) Jest to możliwe ? Jeżeli tak, to byłbym wdzięczny za wszelką pomoc.

Pozdrawiam serdecznie.

Answer 1

position:fixed

<input type="checkbox" name="click" id="click"/>
<div class="tolab">
	<label for="click">show/hide menu</label>
</div>

<nav>
	<ul>
		<li>Item1</li>
		<li>Item2</li>
		<li>Item3</li>
		<li>Item4</li>
		<li>Item5</li>
	</ul>
</nav>

body{
	background:grey;
	margin:0;
}
nav{ 
	background:black;
	color:white;
	position:fixed;
	margin-top:50vh;
	display:none;
	padding-right:1em;
}
nav li{ 
	background:brown;
	color:orange;
	border:1px solid yellow;
}
#click:checked  ~ nav{ 
	display:block;
}
input{
	display:none;
}
.tolab{ 
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
li:hover{ 
	background:black;
	cursor:pointer;
}

 

Comments

Działa... nie spodziewałem się, że to aż tak proste - dziękuje.

Answer 2

a tak :)

https://codepen.io/anon/pen/zEwOWW

Comments

Również panu dziękuje, ta opcja zarówno jest tym czego poszukiwałem.