Membuat navigasi yang bisa menyesuaikan diri dari layar Desktop ke layar Smartphone adalah skill wajib bagi setiap Web Developer. Hari ini di MHFSDEV, kita akan mempraktekkan cara membuat Navbar yang fleksibel tanpa menggunakan framework seperti Bootstrap.
Kita akan menggunakan Flexbox untuk mengatur posisi menu dan Media Queries untuk mengubah tampilannya saat dibuka di HP.
1. HTML Structure
Gunakan tag semantic <nav> agar struktur website lebih SEO friendly.
2. CSS Styling
Di sini kita mengatur transisi dan tata letak. Perhatikan bagaimana .nav-links berubah dari flex-direction: row (desktop) menjadi flex-direction: column (mobile).
3. JavaScript (Logika Klik)
Cukup beberapa baris untuk memberikan fungsi "buka-tutup" pada menu mobile.
Penjelasan Singkat: Kenapa Ini SEO Friendly?
1. Semantic HTML: Penggunaan tag <nav> dan <ul> membantu mesin pencari seperti Google memahami struktur navigasi situsmu.
2. Mobile-First Concept: Dengan membuat navbar yang responsif, skor Core Web Vitals kamu akan lebih baik karena Google sangat mengutamakan kenyamanan pengguna HP (Mobile Usability).
3. Fast Loading: Tanpa library besar seperti Bootstrap, halamanmu akan memuat jauh lebih cepat.
Selengkapnya dapat di lihat berikut ini,
See the Pen Untitled by mifta hasan (@mifta-hasan) on CodePen.
0 Comments