HTML Dasar #36 - Membuat Navigasi Responsif (Hamburger Menu Sederhana)

byFerdian Rahabista -
0

Setelah kita belajar media query, sekarang saatnya menerapkannya untuk membuat navigasi responsif dengan hamburger menu. Di layar desktop, menu navigasi tampil horizontal seperti biasa. Di layar HP, menu berubah menjadi ikon tiga garis (☰) yang bisa diklik untuk menampilkan/menyembunyikan menu.

Apa Itu Hamburger Menu?

Hamburger menu adalah ikon tiga garis horizontal (☰) yang digunakan di website mobile untuk menyembunyikan menu navigasi. Saat diklik, menu akan muncul (biasanya dari samping atau atas). Ini menghemat ruang di layar kecil.

Kapan Menggunakan Hamburger Menu?
- Di layar HP (lebar < 768px)
- Saat menu memiliki banyak link (lebih dari 4-5)
- Untuk menghemat ruang vertikal di layar kecil

Di desktop, menu tetap tampil horizontal seperti biasa.

Struktur Dasar HTML untuk Navbar

Kita akan membuat navbar dengan struktur berikut:

<nav class="navbar">
    <div class="logo">MyWebsite</div>
    <ul class="nav-links" id="navLinks">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="hamburger" id="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>
</nav>

Penjelasan:

  • .logo → nama/logo website (kiri)
  • .nav-links → daftar menu navigasi
  • .hamburger → ikon tiga garis (☰) yang dibuat dengan 3 elemen span

CSS untuk Navbar (Desktop Default)

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Navbar Container */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e293b;
    color: white;
    padding: 15px 30px;
}

/* Logo */
.logo {
    font-size: 24px;
    font-weight: bold;
}

/* Menu Links (Desktop - horizontal) */
.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.3s;
}

.nav-links li a:hover {
    background: #3b82f6;
}

/* Hamburger Icon (sembunyikan di desktop) */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: white;
    margin: 3px 0;
    transition: 0.3s;
}

CSS untuk Responsif HP (Media Query)

Di layar HP, kita ubah navbar menjadi kolom, sembunyikan menu, dan tampilkan hamburger icon.

/* Media Query untuk HP (lebar <= 768px) */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 20px;
    }
    
    /* Tampilkan hamburger icon */
    .hamburger {
        display: flex;
        position: absolute;
        top: 20px;
        right: 20px;
    }
    
    /* Menu: default tersembunyi, vertikal, lebar penuh */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 15px;
        margin-top: 15px;
        text-align: center;
    }
    
    /* Saat menu aktif (diklik) */
    .nav-links.active {
        display: flex;
    }
    
    .nav-links li a {
        display: block;
        padding: 12px;
    }
}

JavaScript untuk Toggle Menu

JavaScript menangani klik pada hamburger icon untuk menampilkan/menyembunyikan menu.

<script>
    const hamburger = document.getElementById('hamburger');
    const navLinks = document.getElementById('navLinks');

    hamburger.addEventListener('click', () => {
        navLinks.classList.toggle('active');
        // Optional: animasi hamburger menjadi X saat aktif
        hamburger.classList.toggle('active');
    });
</script>

Contoh Lengkap: Navbar Responsif dengan Hamburger Menu

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar Responsif - Hamburger Menu</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
        }
        
        /* ========== NAVBAR ========== */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #1e293b;
            color: white;
            padding: 15px 40px;
            position: relative;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .logo a {
            color: white;
            text-decoration: none;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
            gap: 30px;
        }
        
        .nav-links li a {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.3s;
        }
        
        .nav-links li a:hover {
            background: #3b82f6;
        }
        
        /* Hamburger Icon */
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            z-index: 100;
        }
        
        .hamburger span {
            width: 28px;
            height: 3px;
            background: white;
            margin: 4px 0;
            transition: 0.3s;
            border-radius: 2px;
        }
        
        /* Hero Section */
        .hero {
            text-align: center;
            padding: 80px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        .hero p {
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        /* Info Box */
        .info {
            max-width: 800px;
            margin: 40px auto;
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .info h3 {
            margin-bottom: 15px;
            color: #1e293b;
        }
        
        .info ul {
            margin-left: 20px;
        }
        
        .info li {
            margin-bottom: 8px;
            color: #475569;
        }
        
        /* ========== MEDIA QUERY HP ========== */
        @media (max-width: 768px) {
            .navbar {
                padding: 15px 20px;
            }
            
            .hamburger {
                display: flex;
            }
            
            .nav-links {
                display: none;
                flex-direction: column;
                width: 100%;
                position: absolute;
                top: 65px;
                left: 0;
                background: #1e293b;
                padding: 20px;
                gap: 15px;
                text-align: center;
                box-shadow: 0 10px 15px rgba(0,0,0,0.1);
            }
            
            .nav-links.active {
                display: flex;
            }
            
            .hero h1 {
                font-size: 32px;
            }
            
            .hero p {
                font-size: 16px;
            }
            
            /* Animasi hamburger menjadi X */
            .hamburger.active span:nth-child(1) {
                transform: rotate(45deg) translate(8px, 6px);
            }
            
            .hamburger.active span:nth-child(2) {
                opacity: 0;
            }
            
            .hamburger.active span:nth-child(3) {
                transform: rotate(-45deg) translate(8px, -6px);
            }
        }
        
        @media (max-width: 480px) {
            .hero h1 {
                font-size: 28px;
            }
        }
    </style>
</head>
<body>

    <nav class="navbar">
        <div class="logo"><a href="#">MyWebsite</a></div>
        <ul class="nav-links" id="navLinks">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="hamburger" id="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

    <section class="hero">
        <h1>Navbar Responsif dengan Hamburger Menu</h1>
        <p>Resize browser atau buka di HP untuk melihat menu berubah menjadi ikon ☰</p>
    </section>

    <div class="info">
        <h3>Bagaimana Cara Kerjanya?</h3>
        <ul>
            <li>Di desktop (> 768px): menu tampil horizontal seperti biasa</li>
            <li>Di HP (≤ 768px): menu disembunyikan, muncul ikon hamburger (☰)</li>
            <li>Saat ikon diklik: menu muncul dengan animasi slide atau fade</li>
            <li>Ikon hamburger berubah menjadi X saat menu aktif</li>
        </ul>
        <h3 style="margin-top: 20px;">Teknologi yang Digunakan:</h3>
        <ul>
            <li><code>display: flex</code> untuk layout navbar</li>
            <li><code>@media (max-width: 768px)</code> untuk responsive</li>
            <li><code>.classList.toggle()</code> di JavaScript untuk toggle menu</li>
            <li>CSS transform untuk animasi hamburger → X</li>
        </ul>
    </div>

    <script>
        const hamburger = document.getElementById('hamburger');
        const navLinks = document.getElementById('navLinks');

        hamburger.addEventListener('click', () => {
            navLinks.classList.toggle('active');
            hamburger.classList.toggle('active');
        });

        // Optional: tutup menu saat link diklik (opsional)
        const links = document.querySelectorAll('.nav-links li a');
        links.forEach(link => {
            link.addEventListener('click', () => {
                navLinks.classList.remove('active');
                hamburger.classList.remove('active');
            });
        });
    </script>

</body>
</html>

Hasil visual navbar responsif:

Navbar Responsif dengan Hamburger Menu

Resize browser atau buka Device Toolbar untuk melihat menu berubah menjadi ikon ☰

Variasi: Menu Dropdown dari Samping (Off-Canvas)

Alternatif lain: menu muncul dari samping kiri saat hamburger diklik (seperti di banyak aplikasi mobile).

<style>
    /* Sidebar menu (off-canvas) */
    .sidebar-menu {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100%;
        background: #1e293b;
        transition: left 0.3s;
        z-index: 1000;
        padding-top: 60px;
    }
    
    .sidebar-menu.active {
        left: 0;
    }
    
    .sidebar-menu a {
        display: block;
        color: white;
        padding: 15px 25px;
        text-decoration: none;
        border-bottom: 1px solid #334155;
    }
    
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        display: none;
        z-index: 999;
    }
    
    .overlay.active {
        display: block;
    }
</style>
Tips Tambahan:
  • Gunakan position: fixed untuk menu yang menempel di sisi layar
  • Tambahkan overlay gelap di belakang menu saat terbuka
  • Untuk aksesibilitas, tambahkan aria-label pada hamburger button
  • Pastikan menu bisa ditutup dengan menekan tombol ESC atau klik di luar menu

Contoh dengan Overlay dan Tombol Close

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: Arial; }
        
        .navbar {
            background: #1e293b;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .hamburger {
            font-size: 28px;
            cursor: pointer;
            background: none;
            border: none;
            color: white;
        }
        
        /* Sidebar Menu */
        .sidebar {
            position: fixed;
            top: 0;
            left: -280px;
            width: 280px;
            height: 100%;
            background: #1e293b;
            transition: left 0.3s;
            z-index: 1000;
            padding: 20px;
        }
        
        .sidebar.active {
            left: 0;
        }
        
        .sidebar .close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
            float: right;
        }
        
        .sidebar nav {
            margin-top: 60px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .sidebar nav a {
            color: white;
            text-decoration: none;
            padding: 10px;
            border-radius: 8px;
        }
        
        .sidebar nav a:hover {
            background: #3b82f6;
        }
        
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            z-index: 999;
        }
        
        .overlay.active {
            display: block;
        }
        
        .hero {
            text-align: center;
            padding: 50px;
            background: #f0f4f8;
        }
    </style>
</head>
<body>

    <div class="navbar">
        <div>MyWebsite</div>
        <button class="hamburger" id="hamburgerBtn">☰</button>
    </div>

    <div class="sidebar" id="sidebar">
        <button class="close-btn" id="closeBtn">✕</button>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Services</a>
            <a href="#">Contact</a>
        </nav>
    </div>
    
    <div class="overlay" id="overlay"></div>

    <div class="hero">
        <h1>Off-Canvas Menu</h1>
        <p>Klik ☰ untuk membuka menu dari samping</p>
    </div>

    <script>
        const hamburgerBtn = document.getElementById('hamburgerBtn');
        const sidebar = document.getElementById('sidebar');
        const closeBtn = document.getElementById('closeBtn');
        const overlay = document.getElementById('overlay');
        
        function openMenu() {
            sidebar.classList.add('active');
            overlay.classList.add('active');
        }
        
        function closeMenu() {
            sidebar.classList.remove('active');
            overlay.classList.remove('active');
        }
        
        hamburgerBtn.addEventListener('click', openMenu);
        closeBtn.addEventListener('click', closeMenu);
        overlay.addEventListener('click', closeMenu);
        
        // Tutup dengan tombol ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && sidebar.classList.contains('active')) {
                closeMenu();
            }
        });
    </script>

</body>
</html>
MyWebsite

Off-Canvas Menu

Klik ☰ untuk membuka menu dari samping

Kesalahan Umum Pemula

  • Lupa menyembunyikan hamburger di desktop → Ikon ☰ tidak boleh muncul di layar besar. Gunakan display: none di media query desktop atau display: flex di media query HP.
  • Menu tidak muncul saat diklik → Cek apakah JavaScript sudah benar (console.log untuk debugging) dan pastikan ID elemen sesuai.
  • Lupa menambahkan meta viewport → Media query tidak akan berfungsi optimal di HP tanpa <meta name="viewport" content="width=device-width, initial-scale=1.0">.
  • Z-index kurang tinggi → Menu yang muncul harus memiliki z-index lebih tinggi dari konten lain.
  • Menu tidak bisa ditutup → Tambahkan tombol close, overlay, atau klik di luar menu.
Debugging Tips:
  • Buka Developer Tools (F12) → tab Console → lihat apakah ada error JavaScript
  • Cek tab Elements → inspect hamburger dan menu → lihat apakah class 'active' bertambah saat diklik
  • Gunakan console.log('Menu diklik') untuk memastikan event listener berjalan
  • Pastikan media query berfungsi dengan mengubah ukuran browser atau menggunakan Device Toolbar

Latihan Singkat

  1. Buat file HTML baru dengan judul "Latihan Hamburger Menu"
  2. Buat navbar dengan logo, 5 menu, dan hamburger icon
  3. Di desktop (>768px), menu tampil horizontal
  4. Di HP (≤768px), menu tersembunyi, hamburger muncul
  5. Saat hamburger diklik, menu muncul dengan animasi slide
  6. Tambah efek hamburger berubah menjadi X saat menu terbuka
  7. Uji dengan Device Toolbar di Chrome

Intisari Hari Ini

  • Hamburger menu = ikon ☰ untuk menyembunyikan menu di layar kecil
  • Gunakan @media (max-width: 768px) untuk mengubah tampilan navbar di HP
  • Di HP: .nav-links di-display: none, .hamburger di-display: flex
  • JavaScript classList.toggle() untuk menampilkan/menyembunyikan menu
  • Bisa tambahkan animasi hamburger → X dengan CSS transform
  • Alternatif: off-canvas menu (muncul dari samping) dengan position: fixed
Tantangan Akhir Pekan: Buat sebuah Website Landing Page dengan Navbar Responsif lengkap! Persyaratan:
  • Navbar dengan logo, minimal 5 menu, dan hamburger menu di HP
  • Animasi hamburger berubah menjadi X saat menu terbuka
  • Menu bisa ditutup dengan mengklik link menu, tombol close, atau overlay gelap
  • Hero section dengan judul, deskripsi, dan tombol CTA
  • 3 card fitur (di desktop 3 kolom, di HP 1 kolom)
  • Footer dengan 3 kolom informasi (di desktop 3 kolom, di HP 1 kolom)
  • Semua layout menggunakan Flexbox atau Grid
  • Tambahkan kotak penjelasan yang mendokumentasikan cara kerja hamburger menu

Bonus: Tambahkan submenu dropdown pada salah satu menu (misal: Services → Web Dev, Mobile Dev, SEO) yang juga responsif.

Selamat mencoba!

Artikel Sebelumnya: HTML Dasar #35 - Media Query: Membuat Tampilan Berubah di HP, Tablet, PC
Artikel Selanjutnya: HTML Dasar #37 - Proyek Akhir: Membuat Layout Website Responsif (Header, Sidebar, Konten, Footer)

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال