adalah sebuah menu navigasi website yang dikunci pada tempatnya sehingga tidak hilang ketika pengguna menggulirkan mousenya ke bawah halaman, dengan kata lain dapat diakses dengan mudah karena selalu terlihat. Dibuat dengan mudah menggunakan Murni Javascript berukuran kecil serta sentuhan CSS minimalis dan tanpa JQuery.
Banyak blog atau website populer menambahkan fungsi navigasi menu ini agar tetap terlihat di bagian atas. Ketika pengguna menggulirkan mouse ke bawah halaman dan bagian atas menu navigasi tetap menempel dan tetap terlihat. Ini bermaksud untuk memudahkan kepada pengunjung dan tidak harus kembali menggerakan mousenya ke bagian atas untuk menjelajahi halaman yang lainnya.
Teknik sticky ini sebenarnya dapat diterapkan untuk elemen lainnya, seperti bagian samping (sidebar), tombol atau media social sharing/like, dan bagian footer. Namun tentu saja cara mengaplikasikannya berbeda-beda. Dibawah ini penjelasan yang difokuskan pada menu navigasi utama menggunakan javascript.
Cara Membuat Sticky Menu Responsive:
-
Masukan kode CSS style dibawah ini pada bagian
<head>atau sebelum</head>. -
Masukan kode HTML dibawah ini dibagian yang sepantasnya suatu Menu
Navigasi berada, misalnya dibawah Header.
123456789101112131415
<div class="ads-top ads-site adZone sponsor-promo" id="header-main"> <nav class="menu-main"> <div class="menu"> <ul class="topnav" id="myTopnav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Kontak</a></li> <li><a href="#">Disclaimer</a></li> <li><a href="#">Kategori</a></li> <li class="icon"><a class="navi" href="javascript:void(0);" onclick="myFunction()"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAMAAAANxBKoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAAKUlEQVR42mJgJAUwjKoehqoZ8ICRqnoQxeVo7IzmtNG4HFVNR9UAAQYAX8EF85Z3JE8AAAAASUVORK5CYII=" alt="menu"></a></li> </ul> </div> </nav> </div>Gantilah Link dan Nama Menu pada HTML tersebut dengan Link dan Nama Menu Tautan yang dikehendaki sesuai keinginan yang sebagimana mestinya, agar dapat mengarahkan pengunjung ke halaman yang benar.
-
Masukan kode dibawah ini dibaris paling bawah suatu “template” atau
“theme” atau sebelum
</body>123
<script> function myFunction(){var x = document.getElementById("myTopnav");if (x.className === "topnav"){x.className += " responsive"}else{x.className = "topnav"}};!function(){function a(){b(e,i,f)}function b(a,b,c){y=pageYOffset,y>c?a.className=b: a.className=""}function c(a,b){a.className=a.className?"": b}function d(a){return document.getElementById(a)}var e=d("header-main"),f=300,g=d("menu-main"),h="menu-active",i="active";window.addEventListener("scroll",a),onclick=function(){c(g,h)}}(); </script> - Selesai.
Catatan: Panduan pemasangan Sticky Menu Navigasi tersebut diatas dapat dimodifikasi dibagian CSS style agar bisa lebih dipercantik atau kelihatan lebih bagus sesuai dengan keinginan.
Kebanyakan desainer atau webmaster akan setuju bahwa menu navigasi merupakan salah satu komponen yang paling penting dari sebuah website. Meskipun demikian, tidak selalu mudah untuk menggunakan atau mengaksesnya. Secara umum, pengguna harus menggulirkan mouse kembali ke atas website untuk mengakses menu navigasi, dengan catatan HTML Menu tersebut memiliki lebar 100%.
