Membuat Menu melayang tetap diatas (Sticky Navigation Menu)
Kali ini saya akan berbagi tentang membuat menu melayang diatas diatas halaman atau istilah kerenya Sticky Navigation Menu. Sticky navigation menu ini akan bekerja pada sebuah halaman web yang tingginya melebihi ukuran layar/screen dan halaman tersebut discroll ke bawah. Model menu ini dibuat dengan menggabungkan jquery dan css.
Misal kita mempunyai sebuah halaman web/blog seperti gambar berikut :
Seperti anda lihat diatas, halaman tersebut adalah sebuah halaman yang tingginya melebihi ukuran layar sehingga muncul pada sebelah kanan browser sebuah scrollbar. Pada saat scrollbar anda turunkan ke bawah maka menu yang semula ada diatas akan tambah naik dan akhirnya tertutup oleh browser. Lihat gambar berikut :
Teknik sticky navigation menu ini diterapkan pada kasus seperti diatas agar pada saat scroll digerakkan kebawah dan menu menyentuh garis atas browser maka menu tersebut akan tetap berada diatas. Tujuan penerapan ini cukup sederhana yaitu agar pengunjung lebih mudah melakukan explorasi halaman web tanpa harus turun naikkan scrollbar.
Berikut ini contoh script html dan css seperti halaman diatas :
<html>
<head>
<title>Menu melayang tetap diatas (Sticky Navigation Menu)</title>
<style type="text/css">
#halaman {
width:560px; margin:0 auto; font:14px "Trebuchet MS";
}
#header, #footer {
height:80px; background-color:#009900;
padding:5px; box-shadow:#666 1px 1px 2px;
text-align:center;
}
#menu {
padding:10px; background-color:#00CC00;
width:540px; margin:auto;
box-shadow:#666 1px 1px 2px;
}
#menu ul {
list-style:none; margin:0; padding:0;
}
#menu ul li {
display:inline; padding:1px;
}
#menu a {
color:#fff; background-color:#006600; text-decoration:none;
padding:3px 10px;
}
#menu a:hover {
background-color:#008000;
}
#konten {
background-color:#E2FEE4; padding:5px;
}
#topNav {
width:100%; z-index: 99;
bottom:auto;
}
</style>
</head>
<body>
<div id="halaman">
<div id="header">
<h1>www.zainalhakim.web.id</h1>
</div>
<div id="topNav">
<div id="menu">
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Saya</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Buku Tamu</a></li>
</ul>
</div>
</div>
<div id="konten">
<p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
<p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
<p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
<p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
<p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
<p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
<p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
<p><a href="www.zainalhakim.web.id">www.zainalhakim.web.id</a></p>
</div>
<div id="footer"><a href="www.zainalhakim.web.id">www.zainalhakim.web.id</a></div>
</div>
</body>
</html>
Untuk membuat sticky navigation menu anda memerlukan library jquery yang bisa anda download di alamat ini : https://jquery.com/download/
Setelah anda download, kemudian kita harus menyisipkan beberapa perintah tambahan untuk memanggil library jquery tersebut :
<script src="jquery-1.9.1.min.js"></script>
Kode diatas digunakan untuk menyisipkan library jquery dalam halaman web. Tempat menyisipkannya lebih dianjurkan pada bagian <head>...</head>. Setelah itu anda tambahkan kode berikut tepat setelah baris anda menyisipkan perintah diatas :
<script>
$(function() {
// menentukan objek yang dijadikan menu melayang yaitu #topNav
var float_nav_offset_top = $('#topNav').offset().top;
var float_nav = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// kondisi jika halaman di scroll maka menu melayang diletakkan di posisi atas
if (scroll_top > float_nav_offset_top) {
$('#topNav').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#topNav').css({ 'position': 'relative' });
}
};
// menjalankan fungsi
float_nav();
$(window).scroll(function() {
float_nav();
});
});
</script>
Baris perintah diatas berfungsi untuk mengontrol bagian menu agar tetap pada posisi atas pada saat scrollbar digerakkan.
Anda bisa terapkan teknik sticky navigation menu ini pada semua jenis web seperti blogspot, wordpress, joomla, drupal dll. Jika masih ada keraguan atau kebingungan, harap jangan panik. Jangan malu untuk bertanya, silahkan isikan komentar atau pertanyaan anda pada kolom komentar dibawah.
Silahkan anda lihat demo berikut : Demo Sticky Navigation Menu
Silahkan Download Sourcecode lengkap Contoh Sticky Navigation Menu
Semoga Bermanfaat dan selamat mencoba.
Zainal Hakim
** Bebas disunting dengan menyebutkan sumber **
