Cara Membuat jQuery Scrolling Menu

jQuery scrolling menu bar disini kita akan membuat sebuah menu layaknya sebuah one page website, Scrolling menu bar ini akan membuat scroll halaman akan lebih meningkatkan dalam menggunakan menu. Scrolling Menu Ini sangat membantu pengguna untuk mencapai area menu dengan mudah.

Dalam contoh ini, kita akan membuat menu dengan position fixed pada sebelah kiri. Pada saat mengklik menu maka akan otomatis menu akan bergulir ke atas atau bawah untuk mencari menu yang dipilih.

Scrolling Menu HTML

Kode HTML ini digunakan untuk menampilkan menu scrolling. Saya memberikan position fixed pada menu HTML untuk ditampilkan pada halaman bagian kiri.

<div id="scrolling-menu">
    <div id="intro">Introduction</div>
    <div id="feature">Features</div>
	<div id="version">Versions</div>
	<div id="change-log">Change Log</div>
	<div id="download">Download</div>
</div>

Dibawah ini merupakan contoh skrip untuk menampilkan halaman konten dari isi menu yang akan kita pilih

<div id="scroll-content">
	<div id="intro-content">
		<h1>Introduction</h1>- Introduction - Content -
	</div>
	<div id="feature-content">
		<h1>Features</h1>- Features - Content -
	</div>
	<div id="version-content">
		<h1>Versions</h1>- Versions - Content -
	</div>
	<div id="change-log-content">
		<h1>Change Log</h1>- Change Log - Content -
	</div>
	<div id="download-content">
		<h1>Download</h1>- Download - Content -
	</div>
</div>

<style>
body{width:500px;margin:10 auto 60px;}
#scrolling-menu{position: fixed;width: 150px;margin-top:10px;}
#scrolling-menu div{padding:10px;margin-bottom:1px;background: #C7B3B3;color: #F0F0F0;cursor:pointer;}
#scroll-content{border-left:#CCC 4px solid;margin-left:150px;padding-left:60px;color:#E0403A;}
#scroll-content div{margin-bottom: 60px;}
</style>

jQuery Smooth Scrolling Effect

Skrip jQuery ini digunakan untuk menggulir halaman tergantung pada posisi teratas DIV target. Ini dilakukan dengan mengatur properti scrollTop dengan fungsi jQuery animate ().

<script>
	$(document).ready(function (){
		$('#scrolling-menu div').click(function() { 
			var target = $(this).attr('id');
			$('html, body').animate({scrollTop: $('#'+target+'-content').offset().top}, 1000);
		});     
	});
</script>

Oke itulah tadi pembahasan saya tentang Cara Membuat jQuery Scrolling Menu semoga bermanfaat.

Kategori