[HTML|CSS] Jak zrobić wysuwane menu?

W tym wpisie stworzymy płynnie wysuwany panel boczny z menu strony lub inną zawartością.

Kod HTML

Zaczynamy od kodu HTML z przykładowym menu:

<div id="menu" class="menu">
	<button type="button" id="show-menu" class="show-menu" onclick="showMenu();">
		<i class="menu-bar menu-bar-1"></i>
		<i class="menu-bar menu-bar-2"></i>
		<i class="menu-bar menu-bar-3"></i>
	</button>
	<div>
		<h3>Menu</h3>
		<ul>
			<li><a href="#">Menu item 1</a></li>
			<li><a href="#">Menu item 2</a></li>
			<li><a href="#">Menu item 3</a></li>
			<li><a href="#">Menu item 4</a></li>
			<li><a href="#">Menu item 5</a></li>
		</ul>
	</div>
	
	<!-- Tu wstawiasz zawartość, którą chcesz mieć w wysuwanym panelu. -->
</div>

Oczywiście zawartością wysuwanego panelu nie musi koniecznie być menu.

Kod CSS

Kod CSS będzie zawierał między innymi reguły z właściwościami transition i transform, aby panel wysuwał się płynnie, a przycisk "Menu" był animowany.

.menu {

	-ms-transition:left 0.3s,box-shadow ease 0.3s;
	-moz-transition:left 0.3s,box-shadow ease 0.3s;
	-o-transition:left 0.3s,box-shadow ease 0.3s;
	-webkit-transition:left 0.3s,box-shadow ease 0.3s;
	transition:left 0.3s,box-shadow ease 0.3s;
	z-index:9999;
	position:fixed;
	top:0;
	left:-250px;
	background-color:#000000;
	width:250px;
	height:100%;
	
}

button{margin:0;border:0;padding:0;}

.show-menu{

	-ms-transition:-ms-transform 0.5s ease-in-out;
	-moz-transition:-moz-transform 0.5s ease-in-out;
	-o-transition:-o-transform 0.5s ease-in-out;
	-webkit-transition:-webkit-transform 0.5s ease-in-out;
	transition:transform 0.5s ease-in-out;
	display:block;
	overflow:hidden;
	z-index:9999;
	position:absolute;
	top:0;
	right:-32px;
    box-shadow:none;
	background-color:#000000;
	width:32px;
	height:32px;
	cursor:pointer;
	
}

.menu-bar {

	-ms-transform:-ms-transform 0.4s ease-in-out;
	-moz-transform:-moz-transform 0.4s ease-in-out;
	-o-transform:-o-transform 0.4s ease-in-out;
	-webkit-transform:-webkit-transform 0.4s ease-in-out;
	transition:transform 0.4s ease-in-out;
	display:block;
	background-color:#ffffff;
	margin:0 auto;
	margin-bottom:6px;
	width:20px;
	height:2px;
	
}

.menu-bar-1 {margin-top:5px;}

.clicked {box-shadow:0 0 5px #181818;}

.clicked .menu-bar-1 {

	-ms-transform:rotate(-45deg) translate(-6px, 6px);
	-moz-transform:rotate(-45deg) translate(-6px, 6px);
	-o-transform:rotate(-45deg) translate(-6px, 6px);
	-webkit-transform:rotate(-45deg) translate(-6px, 6px);
	transform:rotate(-45deg) translate(-6px, 6px);
	
}

.clicked .menu-bar-2{transform:translate(26px);}

.clicked .menu-bar-3 {

	-ms-transform:rotate(45deg) translate(-5px, -5px);
	-moz-transform:rotate(45deg) translate(-5px, -5px);
	-o-transform:rotate(45deg) translate(-5px, -5px);
	-webkit-transform:rotate(45deg) translate(-5px, -5px);
	transform:rotate(45deg) translate(-5px, -5px);
	
}

.clicked .menu-bar {width:21px;}

.menu h3 {

	text-align:center;
	font-weight:bold;
	font-size:18px;
	color:#00aad4;
	
}

ul {list-style:none;}

.menu ul li a {font-size:15px;color:#00aad4;}

Kod JavaScript

Jeszcze tylko trochę kodu JavaScript i gotowe:

let clicked = 0;

function showMenu() {

	const showMenu = document.getElementById('show-menu');
	const menu = document.getElementById('menu');
	
	if(clicked === 0) {
	
		showMenu.className='show-menu clicked';
		
		menu.style.left = 0;
		
		clicked = 1;
		
	}
	
	else {
	
		showMenu.className='show-menu';
		
		menu.style.left = '-250px';
		
		clicked = 0;
		
	}
	
}

Komentarze

Prześlij komentarz

Dzięki za komentarz!

Popular

[C++] Jak obliczyć pole i obwód trapezu?

Przed napisaniem programu obliczającego pole i obwód trapezu, przypomnij sobie wzory. Pole trapezu liczymy według wzoru P=((a+b)*h)/2. Wzór na obwód Ob=a+b+c+d. Obliczając pole trapezu musimy znać rozmiary dwóch podstaw i wysokości. Obliczamy pole trapezu #include <iostream> using namespace std; int main() { int a; int b; int h; double p; cout << "Podaj długość podstawy a: "; cin >> a; cout << "Podaj długość podstawy b: "; cin >> b; cout << "Podaj wysokość: "; cin >> h; if(cin.good() == true) { p = ((a + b) * h) / 2.0; cout << "Pole trapezu wynosi: " << p; } return 0; } Obliczamy obwód trapezu #include <iostream> using namespace std; int main() { int a, b, c, d, ob; cout << "Podaj długość boku a: "; cin >> a; cout << "Podaj długość boku b: "; cin >> b; cout << "Podaj długość boku c: "; cin >> c;
Czytaj więcej

[PHP] Jak pobrać adres strony?

Gdy zajdzie potrzeba pobrania adresu strony, na której użytkownik aktualnie się znajduje, posłużyć się można do tego celu tablicą $_SERVER z kluczem 'SERVER_NAME'. Pobranie adresu strony, na której znajduje się użytkownik sprowadza się dosłownie do połączenia dwóch elementów tablicy $_SERVER: SERVER_NAME oraz REQUEST_URI . Element o kluczu 'SERVER_NAME' zawiera nazwę hosta serwera, na którym wykonywany jest skrypt, a element z kluczem 'REQUEST_URI' pobiera wszystko to, co zostało wpisane po nazwie domeny np. '/index.php'. Tak więc, aby wyświetlić adres strony lub adres do skryptu, łączymy te dwa elementy: echo $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; Powyższy przykład wyświetli nam URL, pod którym aktualnie się znajdujemy, ale bez przedrostka http/https. Aby do ciągu z URL'em dołączana była nazwa protokołu, musimy użyć jeszcze jednego elementu tablicy $_SERVER, a mianowicie HTTPS , który nie będzie pusty, jeśli żądanie
Czytaj więcej

[HTML] Jak wyśrodkować tekst?

Wyśrodkowanie tekstu w HTML nie jest trudne. Wystarczy tylko zastosować odpowiednią regułę CSS dla elementu, w którym znajduje się dany tekst. W tym przypadku chodzi o regułę text-align:center . Przykład Załóżmy, że mamy nagłówek h1 z tytułem strony i chcemy, aby był on umieszczony po środku. Dopisujemy do niego następujący fragment: style="text-align:center;" - tak jak poniższym przykładzie: <h1 style="text-align:center;">Hello World!</h1> Analogicznie robimy dla innych elementów HTML.
Czytaj więcej