Cara Biar Header navigasi tetap di atas (Sticky Navigation) Cara Biar Header navigasi tetap di atas (Sticky Navigation) - Berguru IT - Tutorial Visual Basic, Networking, Tips dan Trik
VB.Net

VB.Net Tutorial Untuk pemula

Instant Article

Cara Membuat Instant Article Untuk Blogger

logo

Cara Biar Header navigasi tetap di atas (Sticky Navigation)

cara membuat sticky navigasi di blog

Cara Membuat Sticky Navigasi di Blog

Salam hangat buat semua, kali ini saya mau sharing cara supaya header tetap di top atau tetap di atas body walaupun setelah di scroll maka tetap header akan tetap diatas atau position is fixed (posisi tetap) seperti blog saya ini.

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.

Kebanyakan sih para webmaster pasti menggunakan trik ini supaya websitenya tampil dinamis atau nice, dan saya pun sangat setuju bila komponen tersebut sangat diperlukan dan penting banget buat website. Meskipun begitu sangat tidak mudah untuk mengimplementasikannya dalam arti si pengunjung harus menggulirkan halaman web nya (tidak otomatis bergulir). Secara umum si pengunjung website bila ingin kembali ke menu header pasti akan discroll ke atas lagi. Okeh langsung aja ya kita ke tkp.


Banyak para webmaster menambahkan menu navigasi ini agar terlihat dibagian atas terus, ketiga pengguna menggulirkan kebawah halaman dan ke atas halaman navigasi tetap menempel di atas dengan maksud agar si pengguna dapat dengan mudah mengakses navigasi untuk menuju halaman lainnya tanpa harus menggulirkan halaman keatas lagi.

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. Dibawah ini saya coba akan jelaskan cara memasang sticky menu navigasi dengan script javascript didalamnya.


  1. Berikut ini adalah contoh kode CSS style menu navigasi yang biasanya dimasukkan diatas atau sebelum ]]></b:skin> atau </style> dibagian head. sobat master mungkin berbeda-beda style nya oleh karena itu kode ini tidak pleg harus diikuti semua karena mungkin penamaan class nya berbeda-beda. Hanya saja mungkin membantu untuk mudah dipahami.

.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}


Keterangan : nav-menu adalah nama element navigasi yang akan di buat sticky
Ini contoh HTML yang saya gunakan (mungkin berminat dengan tampilan web saya)


<div id="nav-wrap" mobile="yes">

<nav class="menu">

<ul class="nav-menu">

<li>

<a href="https://draft.blogger.com/p/profil.html">About Me<</a>

<a href="https://draft.blogger.com/p/kontak.html">Contact Us<</a>

<a href="https://draft.blogger.com/p/privacy.html">Privacy Policy<</a>

<a href="https://draft.blogger.com/p/disclaimer.html">Disclaimer<</a>

<li/>

<ul/>


image
  1. Masukkan Jquery diatas atau sebelum </head>
Jquery Sticky Menu navigasi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'>
Catatan : jika master sudah ada script diatas maka lewati langkah tersebut dan lanjut kebawah nya.


  1. Masukkan kode javascript diatas atau sebelum kode </head>
JavaScript Sticky menu navigasi

<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>

Jika sudah paham dan sudah ngeh monggo di save template nya jangan ampe bubar listriknya ya.
Akhirnya selesai juga, mudah-mudahan mudah dipahami dan dapat bermanfaat. 
Tags

0 Komentar untuk "Cara Biar Header navigasi tetap di atas (Sticky Navigation)"