Cara Membuat Menu Slide Dengan CSS3 Dan Javascript

Halo, jumpa lagi dengan saya, pada tutorial kali ini saya akan bagikan kalian tutorial mengenai bagaimana Cara Membuat Menu Slide Dengan CSS3 Dan Javascript, baik langsung saja kita mulai praktik nya.

Langsung saja, silahkan kalian buat struktur HTML seperti berikut.

<header>
  <span class="menu-anchor"></span>
</header>

<menu>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Produtos</a></li>
		<li><a href="#">Serviços</a></li>
		<li><a href="#">Sobre</a></li>
		<li><a href="#">Contato</a></li>
	</ul>
</menu>

<section class="main">
	<div class="post">
		<h1>Um título</h1>
		<p>Lorem ipsum dolor sit amet</p>
	</div>
	<div class="post">
		<h1>Pellentesque consectetur luctus</h1>
		<p>Nullam magna mauris.</p>
	</div>
	<div class="post">
		<h1>Nullam magna mauris</h1>
		<p>Lorem ipsum dolor sit amet,</p>
	</div>
</section>

Untuk Paragraf nya bisa kalian isikan sesuai keinginan, lebih banyak lebih bagus, setelah itu kita akan desai dulu tampilan nya, dengan kode CSS3 berikut ini.

* {
	margin: 0;
	padding: 0;
}

/* Isto é necessário para não haver rolagens horizontais quando movermos os elementos */
html, body {overflow-x: hidden;}

body {
	font: 100% arial, verdana, tahoma, sans-serif;
	color: #FFF;
	background-color: #f1c40f;
}

header {
	background: #f49c14;
	padding: 30px;
	overflow: hidden;
}

header h1 {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	width: 80%;
	font-size: 1.5em;
}
h1 a {color: #FFF; text-decoration: none;}

header input {
	float: right;
	padding: 10px;
	width: 200px;
	border: none;
}

.main {
	padding: 30px;
}
.main p {
	font-size: .9em;
	line-height: 1.2em;
	margin-bottom: 20px;
}

.menu-anchor {
	width: 40px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	background: #FFF;
}

.menu-anchor:before {
	content: "";
	display: block;
	margin: 7px auto;
	width: 70%;
	height: 0.25em;
	background: #f49c14;
	box-shadow: 0 .45em 0 0 #f49c14, 0 .9em 0 0 #f49c14;
}

.menu-active .menu-anchor {background: #d55401}

menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 220px;
	height: 100%;
	padding-top: 10px;
	background: #d55401;
	box-shadow: inset -5px -10px 10px 0 rgba(0,0,0,.3)
}

menu li a {
	display: block;
	border-bottom: 1px solid rgba(255,255,255,.3);
	margin: 0 10px;
	padding: 10px;
	color: #FFF;
	text-decoration: none;
}

menu li a:hover {
	background: #FFF;
	color: #d55401;
}


/*
	Aqui você esconde o menu para fora da tela 
	O valor é exatamente a largura da sidebar
*/
menu {
	-webkit-transform: translateX(-220px);
	-moz-transform: translateX(-220px);
	-ms-transform: translateX(-220px);
	transform: translateX(-220px);
	-webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	-ms-transition: all .25s linear;
	transition: all .25s linear;
}

/*
	Essa é a posição original do HEADER e do MAIN
*/
header, .main {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: all .25s linear;
	-moz-transition: all .25s linear;
	-ms-transition: all .25s linear;
	transition: all .25s linear;
}

/*
   Com a classe menu-active na tag HTML
*/
.menu-active menu {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

.menu-active header, 
.menu-active .main {
	-webkit-transform: translateX(220px);
	-moz-transform: translateX(220px);
	-ms-transform: translateX(220px);
	transform: translateX(220px);
}

Kalo sudah, sekarang kita akan memasukan kode Javascript berikut, untuk membuat tombol menu berfungsi menjadi slide ketika di klik. berikut kode nya.

$(document).ready(function(){
	$('.menu-anchor').on('click touchstart', function(e){
		$('html').toggleClass('menu-active');
	  	e.preventDefault();
	});
})

Setelah semua sudah di ketikan, jangan lupa disimpan, kemudian jalankan dibrowser masing-masing dan lihat hasilnya.

Baik, cukup mudah yah ? silahkan kalian modifikasi lagi menjadi lebih keren tentunya :). Sekian tutorial mengenai Cara Membuat Menu Slide Dengan CSS3 Dan Javascript, semoga bermanfaat, amin.

Selamat mencoba 🙂