Sticky Menu Navigasi di Blog

Berikut adalah langkah-langkah cara membuat Sticky Menu Navigasi:

Kode berikut adalah contoh CSS style pada menu navigasi biasanya dimasukan diatas/sebelum ]]></b:skin> atau </style> di bagian head. Sobat Blogger mungkin tidak perlu memasukan kode dibawah ini, karena mempunyai kode yang berbeda namanya, tapi untuk dipahami dasarnya.

#sticky_nav_wrapper {width:100%; height:50px; z-index:9999!important; display:block; }
#sticky_nav {width:100%; height:50px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSKza3lQJcMNDVh7SOO7AzA_VJBtb2iMOIW7Y1tus7LnVDURSmMvpt0sMvkiTP5-iDWK6wg7RCjlW1BQCByxyZGmyQwrUlqSDfb5BDfoIG_bWaWVZpXjE53SwujQSGVY7qAgVdWaJKC6o/s72/black.png"); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; }
.menu_content {max-width:1171px; margin-left:auto; margin-right:auto; list-style:none; width:82%; min-width:999px;}
#sticky_nav ul { list-style:none; margin:0; padding:5px; }
#sticky_nav ul li { margin:0; padding:0; display:inline; }
#sticky_nav ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
#sticky_nav ul li a:hover { color:#fff; background:#111; }

Keterangan: Sebuah Contoh CSS Menu Navigasi.
Warna Biru adalah links gambar background menu navigasi.
Warna Merah adalah Bagian Elemen yang akan dibuat sticky.

<nav>
    <div id="sticky_nav_wrapper">
        <div id="sticky_nav">
            <div class="menu_content">
                <ul>
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">LAYANAN</a></li>
                    <li><a href="#">KATEGORI</a></li>
                    <li><a href="#">INFORMASI</a></li>
                    <li><a href="#">KONTAK</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Masukan kode berikut diatas/sebelum </head>
```
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
```
Catatan: Jika sudah menggunakan JQuery versi lain, maka lewati langkah ini.

Masukan kode javascript berikut di atas </head>

<script type="text/javascript">
$(function() {
      var sticky_nav_offset_top = $('#sticky_nav').offset().top;
      var sticky_nav = function(){
              var scroll_top = $(window).scrollTop();
              if (scroll_top > sticky_nav_offset_top) { 
                      $('#sticky_nav').css({ 'position': 'fixed', 'top':0, 'left':0 });
              } else {
                      $('#sticky_nav').css({ 'position': 'relative' }); 
              }   
       };
       sticky_nav();
       $(window).scroll(function() {
              sticky_nav();
       });
});
</script>

Keterangan: Warna merah adalah bagian HTML menu navigasi yang akan dibuat “sticky” alias tetap tampil dan terlihat bagian diatas, seperti ditunjukan di bagian HTML diatas.

Catatan: Jika membutuhkan kode untuk di convert/di parse agar bisa disave di templatenya, Masuk Ke Tool Konversi/Parse Disini, tapi ini mungkin tidak diperlukan untuk kode diatas.

Jika sudah Paham, kemudian terapkan dan Save template.

Selesai sudah, mudah-mudahan Cara Membuat Sticky Menu Navigasi ini bermanfaat.

D E M O

source

Sticky Menu Navigasi di Blog

0 comments:

Posting Komentar