Cara Membuat jQuery Sliding Menu

Hallo sahabat dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign,Â pada tutorial kali ini saya akan membahas tentang Cara Membuat jQuery Sliding Menu. Biasanya, bilah menu menempati beberapa ruang di halaman web. Dengan membuat menu sliding kita dapat memiliki lebih banyak ruang untuk menampilkan konten utama. pada tutorial artikel sebelumnya saya telah membahas tentang Mengubah Background DIV menggunakan Bootstrap Colorpicker. Saya menggunakan jQueryÂ event klik pada menu untuk memperluas / menciutkan ikon dan mengontrol efek geser dengan menggunakan gaya CSS.

Kode HTML untuk Menu Geser/sliding

Kode ini menampilkan HTML untuk menampilkan item menu geser di halaman. Ini memiliki konten yang saling terkait dengan item menu yang difokuskan pada peristiwa klik dari tautan menu yang sesuai.

<html>
	<head>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
	<body>
		<div>
	<div class="menu-list">
	<div id="close">X</div>
	<ul>
		<li class="menu-links" id ="about">About</li>
		<li class="menu-links" id ="photos">Photos</li>
		<li class="menu-links" id ="terms">contact</li>
		<li class="menu-links" id ="contact">Portofolio</a></li>

	</ul>
	</div>
	
	<div class="menu-link-target">
		<div id="expand-menu"><img src="menu.png" width="24px"/></div>
		<h4 id="about-content">About</h4>
		<p>yoi </p>
		<h4 id="photos-content">Photos</h4>
		<p>yoi </p>
		<h4 id="terms-content">Contact</h4>
		<p>yoi </p>
		<h4 id="contact-content">portofolio</h4>
		<p>yoi </p>
	</div>
</div>
</body>
</html>

Script CSS;

Script CSS di bawah ini di gunakan untuk menata letak dan tampilan sebuah menu agar terlihat lebih menarik.

<style>
.menu-list {
    background: #ba63c6;
    position: absolute;
    top: 0;
    left: -200px;
    height: 100%;
    transition: 0.7s;
    width: 200px;
	opacity:0.9;
}
#expand-menu {
	display:inline-block;
	cursor:pointer;
}
#close {
	margin:10px;
	float:right;
	display:inline-block;
	cursor:pointer;	
	color:#FFF;
    font-size: 16px;
    opacity: 0.5;
}
.menu-list ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    clear: both;
}

.menu-links {
	padding: 10px;
	background:#c781d0;
	margin-bottom:1px;
	cursor:pointer;		
	color: #FFF;
}
.menu-link-target{
    position: absolute;
    left: 0px;
    transition: 0.7s;
	padding:20px;
	width:400px;
	height:300px;
}
.menu-link-target p{
	margin-bottom:60px;
}
</style>

Sliding Sticky Menu Bar menggunakan jQuery

Efek geser masuk dan keluar dicapai dengan mengubah posisi absolut dari elemen menu geser menggunakan jQuery. Berikut script jquery untuk menjalankan menu ,

<script>
$("#expand-menu").on('click',function(){
    $(".menu-list").css( {"left": 0});
	$(".menu-link-target").css( {"left": 200});
	$("#expand-menu").hide();
});
$("#close").on('click',function(){
    $(".menu-list").css({"left": "-"+ $(".menu-list").width()});
	$(".menu-link-target").css( {"left": 0});
	$("#expand-menu").show();
});
$('.menu-links').click(function() { 
		var target = $(this).attr('id');
		$('html, body').animate({scrollTop: $('#'+target+'-content').offset().top}, 1000);
});
</script>

Oke untuk melihat hasilnya silahkan teman – teman praktikkan sendiri, oke itulah tadi pembahasan saya tentang Cara Membuat jQuery Sliding Menu semoga bermanfaat.

Kategori