Cara Membuat Sticky Menu Navigation Agar Website Mobile Friendly
durasi baca : 4 menit
Setiap website, tentunya dibuat untuk tampilan yang lebih “menarik” dengan gaya desain yang bervariasi. Mulai dari pemilihan warna, konten, hingga berbagai komponen (fitur) yang terdapat dalam website tersebut.
Tetapi menarik saja tidak cukup untuk menjadikan sebuah website tersebut menjadi powerfull. Kamu juga harus memperhatikan aspek “mobile friendly”.
Hal ini dikarenakan mengingat banyaknya jumlah pengguna mobile (smartphone) saat ini, akan banyak pengunjung website yang mengakses website kamu melalui smartphone mereka. Jika website kamu sudah mobile friendly, maka akan membuat mereka betah berlama-lama berada di website kamu, tetapi jika website kamu tidak mobile friendly, mereka akan langsung menutup (meninggalkan) website kamu.
Salah satu komponen penting dalam sebuah website yaitu membuat navigasi sticky menu yang menarik. Dimana navigasi ini bertujuan untuk memudahkan pengunjung mengeksplor konten website.
Selain menarik, kamu juga perlu memastikan bahwa navigasi tersebut menjadikan website tetap mobile friendly. Kamu bisa melihat salah satu contoh navigasi sticky menu sebuah website ketika diakses pada perangkat mobile.
Ikuti langkah-langkah berikut untuk membuat navigasi sticky menu yang mobile friendly untuk website kamu.
1. Atur Syntax pada File HTML
Langkah pertama yang perlu kamu lakukan yaitu memasukkan syntax berikut pada file HTML website kamu. Letakkan sebelum bagian header (<header>).
2. Atur Syntax pada File CSS
Kemudian masukkan syntax berikut pada file CSS website kamu.
3. Atur Syntax pada File JavaScript
Langkah terakhir, tambahkan syntax berikut pada file JavaScript website kamu.
let lastScrollpos = window.pageYOffset; let menuButtonCheck = document.querySelector(“.menu-btn”); window.onscroll = function() { let currentScrollPos = window.pageYOffset; if (lastScrollpos > currentScrollPos) { document.getElementById(“top-nav”).style.top = “0”; } else { document.getElementById(“top-nav”).style.top = “-75px”; } lastScrollpos = currentScrollPos; menuButtonCheck.checked = false; }
Nah itulah cara membuat sticky menu untuk website kamu agar tetap mobile friendly. Jika kamu memiliki cara lain, jangan lupa share di kolom komentar dibawah ya.
Semoga bermanfaat dan selamat mencoba.
Suka Artikel Ini?
Cari Artikel
Layanan Whello
- Jasa Pembuatan Website
- Jasa SEO
- Google Ads
- Facebook Ads
- Instagram Ads
- Copywriting
- Jasa Pembuatan Aplikasi
Subscribe Newsletter Whello Gratis
Dapatkan promo eksklusif dan konten menarik langsung di emailmu.
Over Eko Pramono
Webdeveloper
Halo! Perkenalkan, nama saya Eko Pramono. Sekarang ini bekerja di Whello sebagai webdeveloper tapi juga ngurusin technical SEO.