Membuat Menu Navigasi Blog Agar Sticky (Menempel di Layar atas)

Santos el Salam

3 Maret 2020

Menu navigasi pada blog bisa dipahami sebagai petunjuk menuju halaman-halaman tertentu yang dipilih atau dikategorikan oleh pemilik blog berdasarkan jenis-jenis bahasan artikel pada blognya. Selain itu, menu navigasi juga berfungsi untuk memberikan kemudahan kepada pengunjung blog agar ia dengan mudah dapat memilih konten-konten yang diinginkannya sesuai dengan kategori yang ada.

Kita bisa bandingkan antara situs blog yang dilengkapi dengan menu navigasi dengan yang tidak. Saat sebuah situs tidak dijumpai menu navigasi, maka pengunjung akan kurang tertarik menjelajahi situs tersebut karena tidak ada petunjuk yang dapat menarik perhatian pengunjung tersebut. 

Dengan demikian, maka dapat dipahami bahwa keberadaan menu navigasi ini memang sangat penting bagi sebuah blog sehingga diupayakan harus ada meskipun dengan tampilan sederhana. Di dalam dunia Web sendiri, keberadaan navigasi dianggap penting agar pengguna yang sedang berada di halaman tertentu tidak tersesat dan mudah untuk menemukan halaman-halaman lain di website tersebut.

Saking pentingnya menu navigasi ini, beberapa blogger mencoba untuk membuat menu navigasi di blognya agar semakin mudah digunakan oleh pembacanya. Selain membuat menu navigasi menjadi submenu atau dropdown, cara lainnya agar menu selalu terlihat oleh pembacanya adalah membuatnya menjadi sticky atau menempel di layar atas. 

Blog saya ini memang tidak saya buat menu navigasinya menjadi sticky. Namun sebetulnya saya sudah mencobanya dan berhasil membuat menu menjadi sticky. Tampilannya juga cukup keren sebenarnya, menu navigasi tetap muncul dan menempel di atas layar saat halaman digulir ke bawah. Namun entah mengapa saya sendiri merasa kurang cocok dengan tampilan itu sehingga akhirnya saya copot kembali.

Meski begitu, pada kesempatan kali ini saya tetap ingin mencoba berbagi tutorial kepada pembaca sekalian mengenai cara membuat menu navigasi menjadi sticky berdasarkan pengalaman saya. Bagaimana membuatnya?. Silahkan ikuti langkah saya berikut ini. 

1. Buka akun blogger anda. 

2. Pilih menu tema dan klik edit html. 

3. Pastikan di template blog anda terpasang kode seperti di bawah ini, atau jika ragu silahkan tambahkan di atas kode </head> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">

4. Selanjutnya cari kode </body> dan letakkan kode berikut ini di atasnya. 

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

Keterangan: ganti tulisan berwarna merah dengan id menu navigasi di template blog anda (tambahkan tanda pagar). 

4. Silahkan simpan template anda kembali. 

Kode di atas memang cukup ampuh untuk membuat menu navigasi menjadi sticky, sehingga banyak dibagikan tutorialnya oleh para blogger.

Akan tetapi berdasarkan pengalaman saya, ternyata ada beberapa template tertentu yang tidak benar-benar work saat menerapkan kode di atas. Contohnya seperti template blog saya ini. Lihat gambar di bawah. 

menu nav terpotong halaman posting dll. 

Seperti terlihat pada gambar di atas, memang script di atas membuat menu navigasi menjadi sticky, namun ternyata saat halaman digulir melewati postingan blog, menu navigasi terpotong karena tertutupi oleh elemen postingan blog tersebut.

Selain elemen postingan, ada juga fitur-fitur lain yang membuat menu navigasi tertutupi oleh tampilan fitur-fitur tersebut saat digulir ke arahnya. Hal ini pun membuat tampilan blog jadi kurang enak dilihat.

Saya pun mencoba mengatasi hal ini dengan mengedit kode di atas atau pun kode elemen-elemen tersebut dengan mengatur kode position, display dan sebagainya, namun ternyata tetap tidak berhasil. Menu navigasi masih saja tertutupi oleh elemen-elemen tersebut. 

Setelah lelah mengutak-atik untuk mengatasinya, akhirnya solusi justru berhasil saya temukan di postingan lama saya. Pada postingan saya yang berjudul Cara Membuat Header Blog Menjadi Sticky (Menempel di Atas Layar), di sana saya pernah memberikan tutorial mengenai cara membuat header blog menjadi sticky atau menempel di atas layar.

Nah, ternyata kode yang pernah saya bagikan di postingan tersebut juga bisa dipakai untuk membuat menu navigasi menjadi sticky, meskipun letak posisi menu navigasinya sendiri sebetulnya terpisah dari header, atau berada di bawah header. Adapun kodenya sebagai berikut:

<script>

    //<![CDATA[

    bs_makeSticky("navigasimenu");

    function bs_makeSticky(elem) {

        var bs_sticky = document.getElementById(elem);

        var scrollee = document.createElement("div");        bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);

        var width = bs_sticky.offsetWidth;

        var iniClass = bs_sticky.className + ' bs_sticky';

        window.addEventListener('scroll', bs_sticking, false);

        function bs_sticking() {

            var rect = scrollee.getBoundingClientRect();

            if (rect.top < 0) {

                bs_sticky.className = iniClass + ' bs_sticking';

                bs_sticky.style.width = width + "px";

            } else {

                bs_sticky.className = iniClass;

            }

        }

    }

    //]]>

    </script>

    <style>

    .bs_sticking {position:fixed; top:0; z-index:9999;}

    </style> 

Keterangan: ganti tulisan berwarna merah dengan id menu navigasi di template blog anda (tanpa tanda pagar). 

Kode tersebut pun saya letakkan di atas kode </body>, atau menggantikan kode sebelumnya, dan kemudian template saya simpan kembali. 

menu nav sticky berhasil

Hasilnya, menu navigasi akhirnya berhasil menjadi sticky tanpa ada hambatan seperti sebelumnya. Elemen-elemen yang sebelumnya menutupi tampilan menu navigasi pun kini telah berhasil diatasi.

Nah, jika anda mengalami masalah seperti saya, silahkan anda bisa menggunakan kode tersebut untuk menciptakan menu navigasi agar menjadi sticky atau menempel di layar atas.

Itulah Cara Membuat Menu Navigasi Agar Sticky (Menempel di Layar atas). Silahkan anda pilih cara mana dari kedua kode di atas yang berhasil untuk template blog anda. Demikian, semoga bermanfaat.

Labels: Blogging

Thanks for reading Membuat Menu Navigasi Blog Agar Sticky (Menempel di Layar atas). Please share...!

Facebook

Twitter