Cara Membuat Sticky Menu Navigation Agar Website Mobile Friendly

1 menit

Umumnya struktur website hanya terdiri dari bagian header, dua sidebar, footer dan bentuknya kotak, tapi sekarang sudah tidak seperti itu lagi. Sudah banyak website-website dibuat dengan tampilan yang lebih menarik dengan gaya desain yang bervariasi. Menarik saja tidak cukup untuk menjadikan sebuah website itu bagus, menjadikannya mobile friendly juga sangat penting.

Salah satu komponen penting yang bisa kamu terapkan untuk membuat website lebih user friendly walaupun hanya diakses melalui handphone adalah penerapan sticky menu navigation pada website kamu. Sehingga dapat memudahkan pengunjung website kamu untuk mengeksplor konten website.

Banyak cara untuk membuat sticky pada menu navigation, diantaranya dengan menggunakan plugin, atau kamu bisa membuatnya secara custom dengan mengeditnya melalui Javascript dan CSS. Tips kali ini akan memaparkan pembuatan sticky menu navigation menggunakan CSS dan Javascript. Berikut tahapannya :

1. Masukan syntax berikut di file javascript website

(exp : theme.js)

jQuery(document).ready(function() {
jQuery(window).scroll(function () {

if (jQuery(window).scrollTop() > 280) {
jQuery('#masthead').addClass('navbar-fixed');
}
if (jQuery(window).scrollTop() < 281) {
jQuery('#masthead').removeClass('navbar-fixed');
}
});
});

Kamu bisa mengganti #masthead , sesuaikan nama id  yang akan kamu beri style, code ini berfungsi untuk memberikan kondisi pada menu yang akan ditampilkan, menu akan muncul ketika pengguna me-scroll down website, sehingga tidak perlu kembali keatas untuk berpindah ke menu lain.

2. Code CSS untuk efek Sticky pada Menu-Navigation

Langkah selanjutnya kamu bisa memasukkan code CSS berikut untuk memberikan efek sticky atau lengket pada menu navigation.

header#masthead.site-header.navbar-fixed {
position: fixed;
z-index: 999;
width: 100%;
top: 0px; }

code pada  position:fixed berfungsi untuk menampilkan menu-navigation selalu berada didepan, maka tampilan menu-navigation akan sticky ketika kamu me-scroll website.

Selamat mencoba!

0


Web Developer

Leave a Reply

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