Cara membuat Sticky Menu Navigasi di Blogger
Menu navigasi sangat penting bagi pengunjung agar bisa dengan mudah "berselancar" surf dan "baca-baca" (browse) blog kita lebih lama.
Sticky menu atau Navigasi adalah sebuah menu 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.
Secara umum, pengguna harus menggulirkan mouse kembali ke atas website untuk mengakses menu navigasi.
Sebenarnya navigasi sticky ini tidak hanya digunakan untuk navigasi pada bagian header saja tapi dapat juga digunakan pada sitebar dan tentu saja implementasi kode nya berbeda tapi tujuannya sama yaitu menstabilkan posisi pada bagian tertentu pada halaman web.
Begitulah penjelasan tentang sticky navigation. Agar menghemat waktu, langsung saja ke pembahasan utama.
Dibawah ini saya coba akan jelaskan cara memasang sticky menu navigasi dengan script javascript didalamnya.
Berikut adalah Cara membuat Sticky Menu Navigasi :
- Template > Edit HTML
- Copy kode berikut ini dan Paste di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.nav').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
- Sebelum klik "Save", Ganti elemen .nav dengan elemen atau kode yang menjadi Navigasi Menu blog Anda.
Di blog ini kodenya bernama #menu misalkan, sehingga kodenya menjadi :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('#menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#menu').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
- Langkah selanjutnya menerapkan Jquery dengan meletakkan kode berikut setelah tag <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>
Jika sudah menggunakan JQuery versi lain, maka lewati langkah ini.
Atau bisa juga dengan cara yang kedua ini :
Memasukan code CSS berikut diatas atau sebelum ]]></b:skin> atau </style>.
.sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 9999!important; border-top: 0; } .nav-menu{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0} .nav-menu li{display:inline-block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0;border-right:1px solid #f0f0f0} .nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px} .nav-menu li a:hover{background:#f5f5f5} ul.nav-menu{height:38px;margin:0 0 0 0;padding:0 0;float:left} ul.nav-menu li{display:inline-block;list-style-type:none;float:left;margin:0 0;padding:0 0;border-right:none;border-left:1px solid #f0f0f0}
nav-menu adalah nama element navigasi yang akan di buat sticky. Ganti dengan nama element navigasi blog anda
Masukkan kode javascript diatas atau sebelum kode </head>
<script type="text/javascript">
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.menu').addClass('sticky');
} else {
$('.menu').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
Terapkan dan Save template.
Selesai. mudah-mudahan Cara Membuat Sticky Menu Navigasi ini bermanfaat.
kagak bisa dicopy
ReplyDelete