Home Tutorial Set Artikel Projects
Join Sekarang
Tutorial CSS

Belajar CSS Dasar #4: Latihan CSS Dasar Langkah Mudah Membuat Navbar Website Profesional (Support Tampilan HP)

Jajang Nurjaman
Jajang Nurjaman

30 Nov 2025 • 10 menit baca 0 Komentar

Belajar CSS Dasar #4: Latihan CSS Dasar Langkah Mudah Membuat Navbar Website Profesional (Support Tampilan HP)

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:

  1. Rapi dengan Flexbox.
  2. Interaktif dengan Dropdown.
  3. 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!


 

Bagikan Artikel Ini:

Diskusi

Mungkin Anda Juga Suka

Berita lain dari kategori yang sama.

Belajar CSS Dasar #3: Memahami Properti CSS dan Cara Menggunakannya Tutorial CSS

Belajar CSS Dasar #3: Memahami Properti CSS dan Ca...

20 Nov 2025
Belajar CSS Dasar #2: Menautkan Kode CSS Tutorial CSS

Belajar CSS Dasar #2: Menautkan Kode CSS

12 Nov 2025
Belajar CSS Dasar #1: Pengenalan dan Pengertian CSS Tutorial CSS

Belajar CSS Dasar #1: Pengenalan dan Pengertian CS...

12 Nov 2025