Tips Cara Membuat Sticky Menu Navigasi di Blog

By |Updated: November 10, 2016 0 Comment

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 desainer blog/website akan setuju bahwa menu navigasi merupakan salah satu komponen yang paling penting dari sebuah website. Meskipun demikian, tidak selalu mudah untuk menggunakan atau mengaksesnya. Secara umum, pengguna harus menggulirkan mouse kembali ke atas website untuk mengakses menu navigasi.

DEMO

Cara Membuat Sticky Menu Navigasi di Blog

Banyak blog/website populer menambahkan fungsi navigasi menu ini agar tetap terlihat di bagian atas. Ketika pengguna menggulirkan mouse ke bawah halaman dan bagian atas menu navigasi tetap menempel dan tetap terlihat. Ini bermaksud untuk memudahkan kepada pengunjung dan tidak harus kembali menggerakan mousenya ke bagian atas untuk menjelajahi halaman yang lainnya.

sticky menu blog

Image: sticky menu blog

Teknik sticky ini sebenarnya dapat diterapkan untuk elemen lainnya, seperti bagian samping (sidebar), tombol atau media social sharing/like, dan bagian footer. Namun tentu saja cara mengaplikasikannya berbeda-beda. Dibawah ini penjelasan yang difokuskan pada menu navigasi utama menggunakan javascript.

Berikut adalah langkah-langkah cara membuat Sticky Menu Navigasi:

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

Contoh CSS Sticky Menu Navigasi

#sticky_nav_wrapper {width:100%; height:50px; z-index:9999!important; display:block; }
#sticky_nav {width:100%; height:50px; background:url("https://lh4.googleusercontent.com/-mf7sWSyLQaI/VCthfrYut_I/AAAAAAAAL9E/7kUG55g8pZU/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.

Contoh HTML

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

2. Masukan kode berikut diatas/sebelum </head>

JQuery Sticky Menu Navigasi

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

3. Masukan kode javascript berikut di atas </head>

Javascript Sticky Menu Navigasi

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

4. Jika sudah Paham, kemudian terapkan dan Save template.

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

Tags:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *