Navbar atau navigation bar adalah elemen penting dalam setiap website. Tampilannya yang rapi dan mudah digunakan akan sangat membantu pengunjung untuk menjelajahi situs web kamu. Tapi, gimana kalau website dibuka di perangkat dengan layar kecil, seperti smartphone? Di sinilah navbar responsive berperan. Dengan menggunakan HTML dan CSS, kita bisa membuat navbar yang menyesuaikan diri dengan ukuran layar, sehingga tetap fungsional di berbagai perangkat.

1. Struktur Dasar HTML

Langkah pertama adalah membuat struktur dasar navbar menggunakan HTML. Kita akan menggunakan elemen-elemen semantik seperti <nav> untuk wadah utama, <ul> untuk daftar menu, dan <li> untuk setiap item menu.

<nav class="navbar">
  <a href="#" class="brand-logo">My Website</a>
  <ul class="nav-links">
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tentang Kami</a></li>
    <li><a href="#">Layanan</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

Dalam kode di atas:

• <nav class="navbar"> adalah container utama untuk navbar.
• <a href="#" class="brand-logo"> adalah link untuk logo atau nama website.
• <ul class="nav-links"> adalah daftar menu navigasi.
• <li><a href="#"> adalah setiap item menu.

2. Styling dengan CSS

Setelah struktur HTML siap, kita akan memberikan gaya dengan CSS. Kita akan memulai dengan gaya dasar untuk tampilan desktop.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  padding: 1rem 2rem;
}

.brand-logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #ddd;
}

• display: flex; pada .navbar akan membuat logo dan menu berada dalam satu baris dan sejajar.
• justify-content: space-between; memisahkan logo dan menu ke ujung kiri dan kanan.
• list-style: none; menghilangkan bulatan pada daftar menu.
• transition: color 0.3s ease; menambahkan efek halus saat kursor mengarah ke menu.

3. Membuat Navbar Responsif dengan Media Queries

Nah, ini bagian terpentingnya. Untuk membuat navbar responsif, kita akan menggunakan media queries. Media query adalah fitur CSS yang memungkinkan kita menerapkan gaya yang berbeda berdasarkan kondisi tertentu, seperti lebar layar.

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    text-align: center;
    display: none; /* Sembunyikan menu secara default */
  }

  .nav-links.active {
    display: flex; /* Tampilkan menu saat aktif */
  }
}

• @media (max-width: 768px) adalah media query yang akan aktif saat lebar layar kurang dari atau sama dengan 768px.
• flex-direction: column; mengubah tata letak navbar menjadi vertikal (dari atas ke bawah).
• display: none; menyembunyikan menu saat di layar kecil. Nantinya, kita akan menggunakan JavaScript untuk menampilkan menu ini saat tombol “hamburger” diklik.

4. Menambahkan Tombol Hamburger (Opsional, tapi Sangat Dianjurkan)

Untuk menampilkan menu yang tersembunyi di layar kecil, kita perlu menambahkan tombol “hamburger” yang biasa kita lihat di website versi mobile.

Tambahkan HTML untuk tombol hamburger:

<nav class="navbar">
  <a href="#" class="brand-logo">My Website</a>
  <div class="hamburger-menu">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <ul class="nav-links">
    ...
  </ul>
</nav>

Tambahkan CSS untuk tombol hamburger:

.hamburger-menu {
  display: none; /* Sembunyikan di layar besar */
  cursor: pointer;
  padding: 10px;
}

.hamburger-menu .bar {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px 0;
}

@media (max-width: 768px) {
  ...
  .hamburger-menu {
    display: block; /* Tampilkan di layar kecil */
  }
}

5. Interaksi dengan JavaScript

Sekarang, saatnya membuat tombol hamburger berfungsi. Kita akan menggunakan JavaScript untuk menambahkan kelas .active pada .nav-links saat tombol diklik.

const hamburger = document.querySelector('.hamburger-menu');
const navLinks = document.querySelector('.nav-links');

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

Kode di atas secara sederhana:

1. Mendapatkan elemen tombol hamburger dan daftar menu.
2. Menambahkan event listener ke tombol hamburger.
3. Saat tombol diklik, fungsi classList.toggle('active') akan menambahkan atau menghapus kelas active dari daftar menu, yang pada akhirnya akan menampilkan atau menyembunyikan menu sesuai dengan CSS yang sudah kita buat sebelumnya.

Dengan mengikuti langkah-langkah di atas, kamu sudah bisa membuat navbar responsif yang terlihat profesional dan berfungsi dengan baik di berbagai perangkat. Selamat mencoba! 🚀