Membuat Menu Dengan Jquery

Halo teman-teman semua, apa kabar semuanya setelah libur panjang. Pastinya fresh yah yang habis liburan untuk menghilangkan penat yang ada, ketemu lagi dengan saya di artikel kali ini tentang Membuat Menu Dengan Jquery. Oke artikel kali ini kita akan membuat menu yang mana ketika di klik maka menu akan muncul dari sebelah kanan di bantu dengan Jquery, langsung saja kita lihat demo nya pada gambar di bawah ini

Ketika diklik “Open Menu” maka menu akan muncul  dan jika di klik silang (x) maka menu akan kembali menghilang, kedua ini di singkronisasikan oleh css dan Jquery. Baik mari langsung kita praktekkan, jangan lupa teman-teman siapkan text editornya lalu copy script di bawah ini

<!DOCTYPE html>
<html>
<head>
	<title>Membuat Menu Dengan Jquery</title>
</head>
<body>
<div id="container">
	<h1 class="slide-menu-open">Open Menu</h1>
	<div class="side-menu-overlay" style="width: 0px; opacity: 0;"></div>
	<div class="side-menu-wrapper">
		<a href="#" class="menu-close">&times;</a>
		<ul>
		    <li><a href="http://www.google.com" target="_blank" rel="nofollow">Google Search</a></li>
		    <li><a href="http://www.yahoo.com" target="_blank" rel="nofollow">Yahoo Search</a></li>
		    <li><a href="http://www.facebook.com" target="_blank" rel="nofollow">Facebook</a></li>
		    <li><a href="http://www.flickr.com" target="_blank" rel="nofollow">Flickr</a></li>

		</ul>
	</div>
</div>
</body>
</html>

Kemudian pastekan di dalam text editornya, save dengan nama index.html dan run pada browsernya. Dan outputnya seperti gambar di bawah

Langkah berikutnya atur html nya dengan css

<style type="text/css">
	*{
	padding: 0; 
	margin: 0
	}
	h1{
	color: orange; 
	cursor: pointer;
	}
	#container{
	width: 600px; 
	margin: auto
	}
	.side-menu-wrapper { 
         overflow: hidden;
         background: rgba(0,0,0,.95);
         padding: 40px 0 0 40px;
         position: fixed; 
         top: 0;
         right: -290px; 
         height: 100%;
         z-index: 2;
         transition: 0.5s; 
         width: 250px;
         font: 20px "Courier New", Courier, monospace;
	}
	.side-menu-wrapper > ul{ 
	    list-style:none;
	    padding:0;
	    margin:0;
	    overflow-y: auto; 
	    width:500px; 
	    height:95%;
	}
	.side-menu-wrapper > ul > li > a { 
	    display: block;
	    border-bottom: 1px solid #131313;
	    padding: 6px 4px 6px 4px;
	    color: #989898;
	    transition: 0.3s;
	    text-decoration: none;
	}
	.side-menu-wrapper > a.menu-close { 
	    padding: 8px 0 4px 23px;
	    color: #6B6B6B;
	    display: block;
	    margin: -30px 0 -10px -20px;
	    font-size: 35px;
	    text-decoration: none;
	}

	.side-menu-overlay {
	    height: 100%;
	    width: 0;
	    position: fixed;
	    z-index: 1;
	    top: 0;
	    left: 0;
	    background-color: rgba(0,0,0,.7);
	    overflow-y: auto;
	    overflow-x: hidden;
	    text-align: center;
	    opacity: 0;
	    transition: opacity 1s;
	}
	</style>

Tambahkan css nya di dalam tag <head>, lalu save dan refresh pada browsernya maka akan tampil seperti gambar di bawah ini

Ketika di klik belum berfungsi menu nya karena di class (“.side-menu-wrapper“) di berikan -290px

Kemudian nanti kita akan berikan fungsi Jquery nya, pertama-tama sertakan library Jquery nya di dalam tag <head>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>

Lalu tambahkan script di bawah ini

        <script type="text/javascript">
		var slidebar_width  = 290; //slidebar width + padding size
		var slide_bar       = $(".side-menu-wrapper"); 
		var slide_open_btn  = $(".slide-menu-open"); 
		var slide_close_btn = $(".menu-close"); 
		var overlay         = $(".side-menu-overlay"); 

		slide_open_btn.click(function(e){
		    e.preventDefault();
		    slide_bar.css( {"right": "0px"});
		    overlay.css({"opacity":"1", "width":"100%"});
		});
		slide_close_btn.click(function(e){
		    e.preventDefault();
		    slide_bar.css({"right": "-"+ slidebar_width + "px"});
		    overlay.css({"opacity":"0", "width":"0"});  
		});
	</script>

Jika sudah save dan refresh browsernya, maka menu yang kita buat sudah berhasil di buat.

Nah teman-teman cukup mudah bukan, kalian juga bisa memodifikasi dari contoh diatas. Penting sekali kita membuat fitur-fitur menu seperti salah satu contoh di atas ini untuk di letakkan dalam website kita supaya lebih menarik dan atraktif, sampai di sini dulu di artikel kali ini tentang Membuat Menu Dengan Jquery. Semoga menjadi tambahan refrensi untuk pembuatan menu pada sebuah website, kita berjumpa lagi di artikel berikutnya. Terimakasih dan sampai jumpa.

Semoga bermanfaat 🙂

Baca juga artikel tentang Membuat Menu Slide Down Ketika Scroll dengan Jquery