[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;
		
	}
	
}