Belajar CSS Dasar #4: Latihan CSS Dasar Langkah Mudah Membuat Navbar Website Profesional (Support Tampilan HP)
Ditulis oleh Jajang Nurjaman |
Diperbarui pada 30 November 2025
Latihan Membuat Navbar Modern dari Dasar Hingga Responsive
Setelah
kita belajar berbagai properti CSS dasar kemarin, sekarang saatnya kita
"mengotori tangan" dengan praktik nyata. Kita akan membuat Navbar atau menu navigasi.
Jangan
khawatir kalau terdengar rumit. Kita akan memecahnya menjadi 3 level, mulai
dari yang paling gampang sampai yang level pro (responsif di HP).
"Setiap ahli dulunya adalah pemula. Jangan takut salah, karena error adalah guru terbaik dalam koding."
Mari kita siapkan teks editor (VS Code) dan kopi hangatnya! ☕
Level 1: Navbar Horizontal Sederhana (Flexbox)
Di level
ini, target kita cuma satu: Membuat menu yang rapi, logo di kiri, dan link di
kanan. Rahasianya? Kita pakai Flexbox.
1. Struktur HTML
Buat file
index.html. Kita butuh pembungkus (<nav>), logo, dan daftar menu (<ul>).
<!DOCTYPE html><html lang="id"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Latihan Navbar Modern</title><link rel="stylesheet" href="style.css"><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"></head><body><nav class="navbar"><div class="logo">PusatSolusi</div><ul class="nav-links"><li><a href="#">Beranda</a></li><li><a href="#">Tutorial</a></li><li><a href="#">Tentang</a></li><li><a href="#">Kontak</a></li></ul></nav></body></html>
2. Styling CSS (Level 1)
Buat file
style.css. Fokus kita adalah display:
flex dan justify-content:
space-between.
/* RESET & BASE */* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}body {background-color: #f4f4f4;}/* --- NAVBAR UTAMA --- */.navbar {background-color: #1e293b; /* Slate Dark */padding: 1rem 2rem;display: flex;justify-content: space-between;align-items: center;color: white;/* FIX POSISI: Agar menu mobile menempel relatif terhadap ini */position: relative;z-index: 100;}.logo {font-size: 1.5rem;font-weight: 600;letter-spacing: 1px;}.nav-links {display: flex;list-style: none;gap: 20px;}.nav-links a {text-decoration: none;color: #cbd5e1;font-weight: 400;transition: color 0.3s;}.nav-links a:hover {color: #38bdf8; /* Sky Blue on hover */}
Penjelasan
Singkat:
- display:
flex pada .navbar membuat anak-anaknya (logo dan ul) menjadi
fleksibel.
- justify-content:
space-between mendorong logo
mentok ke kiri dan menu mentok ke kanan. Otomatis rapi!
Hasilnya:
Level 2: Navbar dengan Dropdown Menu
Sudah
berhasil Level 1? Mantap! 🔥
Sekarang,
bayangkan menu "Tutorial" punya sub-menu (misal: HTML, CSS, JS). Kita
butuh Dropdown.
1. Update HTML
Ubah sedikit bagian <li> Tutorial menjadi seperti ini:
<li class="dropdown"> <a href="#">Tutorial ▾</a> <ul class="dropdown-menu"> <li><a href="#">Belajar HTML</a></li> <li><a href="#">Belajar CSS</a></li> <li><a href="#">Belajar JS</a></li> </ul> </li>2. Update CSS (Level 2)
Konsepnya:
Sub-menu kita sembunyikan dulu, lalu kita munculkan saat induknya di-hover.
* --- LEVEL 2: Dropdown Menu (UPGRADED) --- */.dropdown {position: relative;}/* Kotak Dropdown Utama */.dropdown-menu {position: absolute;/* Memberi jarak sedikit dari navbar (biar ada sela nafas) */top: 140%;left: 0;/* Warna background sedikit lebih terang dari navbar biar kontras */background-color: #1e293b;/* Lebar minimum biar gak sempit */min-width: 200px;list-style: none;padding: 10px 0;border-radius: 8px; /* Sudut lebih membulat *//* Shadow yang lebih lembut dan luas (Glow effect) */box-shadow: 0 10px 25px rgba(0,0,0,0.2);/* Aksen garis warna di atas (Pemanis) */border-top: 3px solid #38bdf8; /* Warna Sky Blue *//* Animasi Masuk */opacity: 0;visibility: hidden;transform: translateY(15px); /* Mulai dari agak bawah */transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Efek membal (bounciness) */z-index: 200;}/* Segitiga Kecil (Panah) di atas Dropdown */.dropdown-menu::before {content: '';position: absolute;top: -9px; /* Posisi di atas kotak */left: 20px; /* Jarak dari kiri */border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #38bdf8; /* Sesuaikan dengan warna border-top */}/* Jembatan Transparan (PENTING) *//* Agar saat mouse pindah dari tulisan 'Tutorial' ke dropdown, menu gak ilang */.dropdown::after {content: '';position: absolute;width: 100%;height: 30px; /* Area aman di bawah menu induk */top: 100%;left: 0;}/* Item List di dalam Dropdown */.dropdown-menu li a {display: block;padding: 12px 25px; /* Spasi lebih lega */color: #cbd5e1;font-size: 0.95rem;font-weight: 500;transition: all 0.3s ease; /* Transisi halus buat hover *//* Garis tipis pemisah antar menu (opsional, biar rapi) */border-bottom: 1px solid rgba(255, 255, 255, 0.05);}/* Hilangkan garis pemisah di item terakhir */.dropdown-menu li:last-child a {border-bottom: none;}/* Efek Hover Dinamis pada Item (Slide ke Kanan) */.dropdown-menu li a:hover {background-color: #334155;color: #38bdf8; /* Teks jadi biru muda */padding-left: 35px; /* Teks bergeser ke kanan 10px (Efek Slide) */}/* Trigger Hover (Saat Induk disentuh) */.dropdown:hover .dropdown-menu {opacity: 1;visibility: visible;top: 120%; /* Posisi akhir animasi (sedikit naik dari posisi awal) */transform: translateY(0);}
"Kode yang bersih itu seperti puisi. Indah dibaca dan punya makna yang jelas."
Hasilnya:
Level 3: Navbar Responsif (Hamburger Menu)
Ini
adalah tantangan terakhir! Di layar HP, menu horizontal itu sempit dan jelek.
Kita harus mengubahnya menjadi tombol garis tiga (Hamburger) yang kalau diklik
baru menunya muncul.
1. Update HTML
Tambahkan
tombol hamburger sebelum </ul> atau setelah logo.
<nav class="navbar"><div class="logo">PusatSolusi</div><div class="hamburger"><span></span><span></span><span></span></div><ul class="nav-links"><li><a href="#">Beranda</a></li><li class="dropdown"><a href="#">Tutorial ▾</a><ul class="dropdown-menu"><li><a href="#">Belajar HTML</a></li><li><a href="#">Belajar CSS</a></li><li><a href="#">Belajar JS</a></li></ul></li><li><a href="#">Tentang</a></li><li><a href="#">Kontak</a></li></ul></nav>
2. Update CSS (Media Query)
Kita
gunakan @media untuk mendeteksi layar kecil (maksimal 768px).
/* --- HAMBURGER BUTTON --- */.hamburger {display: none;cursor: pointer;flex-direction: column;gap: 5px;z-index: 101; /* Pastikan tombol di atas menu */}.hamburger span {width: 25px;height: 3px;background-color: white;border-radius: 5px;transition: all 0.3s ease; /* Transisi halus untuk animasi X */}/* --- MOBILE RESPONSIVE --- */@media (max-width: 768px) {.hamburger {display: flex;}.nav-links {/* Posisi Menu Mobile */position: absolute;top: 100%;left: 0;width: 100%;background-color: #1e293b;flex-direction: column;align-items: center;/* FIX MENU BOCOR (Hidden State) */max-height: 0;padding: 0; /* Hilangkan padding saat tutup */opacity: 0; /* Hilangkan teks saat tutup */overflow: hidden; /* Potong konten yang tumpah *//* Transisi Pembukaan */transition: all 0.4s ease-in-out;z-index: 99;}/* FIX MENU AKTIF (Open State) */.nav-links.active {max-height: 500px; /* Buka tinggi */padding: 20px 0; /* Kembalikan padding */opacity: 1; /* Munculkan teks */box-shadow: 0 10px 15px rgba(0,0,0,0.1);}/* Reset Dropdown di Mobile agar statis */.dropdown-menu {position: static;opacity: 1;visibility: visible;transform: none;background-color: transparent;box-shadow: none;text-align: center;display: none;width: 100%;}.dropdown:hover .dropdown-menu {display: block;background-color: #0f172a;}/* --- ANIMASI HAMBURGER JADI X --- *//* Garis 1: Miring ke kanan bawah */.hamburger.toggle span:nth-child(1) {transform: rotate(45deg) translate(5px, 6px);}/* Garis 2: Hilang */.hamburger.toggle span:nth-child(2) {opacity: 0;}/* Garis 3: Miring ke kanan atas */.hamburger.toggle span:nth-child(3) {transform: rotate(-45deg) translate(5px, -6px);}}
3. JavaScript (Otak-nya)
Tambahkan
script sederhana sebelum </body> agar tombolnya berfungsi.
<script>const hamburger = document.querySelector('.hamburger');const navLinks = document.querySelector('.nav-links');hamburger.addEventListener('click', () => {// 1. Toggle Menu (Buka/Tutup)navLinks.classList.toggle('active');// 2. Toggle Animasi Ikon (Garis jadi X)hamburger.classList.toggle('toggle');});</script>
Hasilnya:
Kesimpulan
Selamat!
Kamu baru saja membuat Navbar Modern yang:
- Rapi dengan Flexbox.
- Interaktif dengan Dropdown.
- Adaptif di HP
dengan Responsive Design.
"Belajar koding itu maraton, bukan lari sprint. Pelan-pelan asal sampai tujuan."
Silakan
diulik warnanya, ganti font-nya, dan sesuaikan dengan brand kamu. Sampai jumpa
di tutorial berikutnya!