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.
berikut codeh nya
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 **http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html
berikut codeh nya
<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>
<script src="jquery-1.9.1.min.js"></script>
<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>
</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>
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 **http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html
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 :
- See more at: http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html#sthash.NHKjJ3fx.dpuf
Berikut ini contoh script html dan css seperti halaman diatas :
- See more at: http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html#sthash.NHKjJ3fx.dpuf
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 :
- See more at: http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html#sthash.NHKjJ3fx.dpuf
Berikut ini contoh script html dan css seperti halaman diatas :
- See more at: http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html#sthash.NHKjJ3fx.dpuf
0 komentar:
Posting Komentar