Membuat Menu Slide Out Menggunakan Javascript

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Menu Slide Out Menggunakan Javascript. Dalam kasus ini kita membuat sebuah menu secara slide out dengan bantuan dari script javascript. Bagaimana cara membuatnya silahkan ikuti langkah-langkah dalam pembuatanya.

Langkah Pertama

Sahabat silahkan membuat struktur HTML dengan mengetikkan seperti code dibawah ini:

<div id="menu">
		<div class="btn-icon" onclick="show()">
			<span></span>
			<span></span>
			<span></span>
		</div>

		<ul>
			<li>Home</li>
			<li>Profile</li>
			<li>About</li>
			<li>Contact</li>			
			<li>Help</li>
		</ul>
	</div>

Pada code diatas terdapat class=btn-icon ini akan kita buat sebagai icon yang bisa di click.

Langkah Kedua

Tentu kita akan menambahkan style CSS agar tampilan makin menarik silahkan ketikkan code CSS berikut:

*{margin:0;padding: 0;}
body{}
#menu{
	position: absolute;
	width: 250px;
	height: 100%;
	background: #425fb7;
	left: -250px;
	transition:  .5s;
}

#menu.active{
	left:0;
}

#menu ul li{
	list-style: none;
	color:#fff;
	font-size: 20px;	
	font-weight: bold;
	padding:20px 24px;
}

#menu .btn-icon{
	position: absolute;
	top: 15px;
	left: 270px;
}

span:nth-child(1){
	width: 45px;
	height: 5px;
	background: #e2004a;
	display: block;
	margin: 4px;
	border-radius: 5px;
}

span:nth-child(2){
	width: 35px;
	height: 5px;
	background: #e2004a;
	display: block;
	margin: 4px auto;
	border-radius: 5px;
}

span:nth-child(3){
	width: 25px;
	height: 5px;
	background: #e2004a;
	display: block;
	margin: 4px auto;
	border-radius: 5px;
}

sebelumnya icon yang akan di klik kita menggunakan dari tag span untuk membuatnya, agar tampilan icon berbeda saya disini membuat beberapa sebagian seperti bisa dilihat pada baris akhir style CSS.

Langkah selanjutnya kita tambahkan script javascript berikut ini untuk membuat function dari event click. Coba ketikkan script dibawah ini

<script>
		function show(){
			document.getElementById('menu').classList.toggle('active');
		}
	</script>

Jika sudah mengetikkan semua code diatas jangan lupa untuk simpan, kemudian silahkan sahabat jalankan pada browser masing-masing.

Saya kira cukup pembahasan kali ini tentang Cara Membuat Menu Slide Out Menggunakan Javascript.

Semoga bermanfaat dan terima kasih

Membuat Menu Slide Out Menggunakan Javascript

Kategori