Cara Membuat Menu Statis dengan Jquery Sticky

Cara Membuat Menu Statis dengan Jquery Sticky

Pada artikel ini saya mau coba membahas bagaimanasih cara membuat menu statis. statis maksudnya yaitu ketika kita menscroll website tersebut kebagian bawah, maka menu pada web tersebut akan tetapi diam dibagian atas, sehingga memudahkan kita untuk memilih navigasi menu yang lainnya, intinya tidak usah repot mengscroll web tersebut kembali pada bagian atas dimana disitu baru kita bisa memilih menu navigasi yang lainnya. menu statis juga bisa dibilang yaitu sticky menu atau sticky menu bar.

Nah pada kasus kali ini saya coba terapkan pada pemrograman html dan bisa juga digunakan di php, kalian juga bisa menggunakannya untuk memodifikasi menu template pada web kalian. Disini saya menggunakan yang namanya plugin jquery sticky plugin, yang bisa kalian download di stickyjs.com.
Jika kalian sudah mendownload file jquery tersebut, maka langsung saja kita praktekan. berikut ini tampilan dari sticky menu yang telah saya coba.
Cara Membuat Menu Statis dengan Jquery Sticky 
Pada gambar diatas adalah posisi menu sebelum halaman dari html tersebut saya scrolling kebawah, bisa dilihat dengan jelas posisi header,menu dan body masih normal, nah jika saya scroll kebawah maka tampilannya akan seperti dibawah ini.
Cara Membuat Menu Statis dengan Jquery Sticky 
Bisa dilihat setelah di scroll maka tulisan header tadi menghilang, begitupula dengan tulisan body. tetapi posisi menu tetapi diatas yang artinya menu tetap statis diam, tidak menghilang ketika saya coba scroll kebawah. 
Terus bagaimana cara membuat seperti menu diatas? bisa kalian coba copykan script yang telah saya buat ini, untuk pembelajaran, jangan lupa download terlebih dahulu file jquery sticky pluginnya, setelah itu include didalam file html/php milik kalian. seperti contoh script dibawah.
<!doctype html>
<html>
<head>
<title>Menu Statis dengan Sticky Plugin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script> <!-- file sticky jquery -->
<script>
$(window).load(function(){
$("#header").sticky({ topSpacing: 0 });
});
</script>

<style>
body {
height: 10000px;
padding: 0;
margin: 0;
}

#header {
background: #000000;
color: white;
font-family: Droid Sans;
font-size: 18px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
width:100%;
box-sizing:border-box;
}
</style>
</head>
<body>
<p><center>Header</center></p>
<div id="header">
<p>Menu Statis dengan Jquery Sticky</p>
</div>
<p><center style='width:500px; height:500px; background:#333333; margin:auto; text-align:center; color:#fff'>Body </center></p>
</body>
</html>

Silahkan coba buat file html baru lalu copykan script diatas, maka hasilnya akan nampak seperti yang telah saya buat, jika tidak berjalan, mungkin kalian lupa menginclude file jquerynya yang telah saya jelaskan sebelumnya.

Sekian pembahasan artikel kali ini, jika ada yang kurang jelas dan tidak paham bisa menanyakannya dikolom komentar. semoga artikel ini membantu teman-teman semua. Terima kasih telah berkunjung di blog ini, jangan lupa baca artikel menarik yang lainnya.

7 thoughts on “Cara Membuat Menu Statis dengan Jquery Sticky

Leave a Reply

Your email address will not be published. Required fields are marked *