Beranda
CSS
HTML

Membuat Navbar pada HTML dan CSS

Navbar atau navigasi bar adalah elemen menu yang biasanya berada di bagian atas halaman web dan berisi tautan ke halaman-halaman penting lainnya
Kode Violet
Membuat Navbar pada HTML dan CSS

Halo teman-teman, selamat datang di artikel coding santai kita hari ini!
Pada kesempatan ini kodeviolet.com akan membahas tentang Membuat Navbar pada HTML dan CSS, salah satu elemen penting dalam membangun tampilan website yang rapi dan mudah dinavigasi.

Apa Itu Navbar?

Navbar atau navigasi bar adalah elemen menu yang biasanya berada di bagian atas halaman web dan berisi tautan ke halaman-halaman penting lainnya di situs. Navbar membantu pengguna berpindah antar halaman dengan mudah.

Struktur Dasar Navbar dengan HTML

Untuk membuat navbar, pertama-tama kita perlu membuat struktur HTML-nya. Berikut adalah contoh dasar:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Navbar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Beranda</a></li>
      <li><a href="#">Tentang</a></li>
      <li><a href="#">Layanan</a></li>
      <li><a href="#">Kontak</a></li>
    </ul>
  </nav>
</body>
</html>

Mendesain Navbar dengan CSS

Selanjutnya, kita akan tambahkan styling agar navbar terlihat menarik:

/* style.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

nav {
  background-color: #333;
  padding: 10px 0;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 20px;
}

nav ul li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: color 0.3s;
}

nav ul li a:hover {
  color: #f0db4f;
}
DEMO

Penjelasan Struktur

Elemen Fungsi
<nav> Tag HTML5 khusus untuk navigasi utama
<ul> Daftar tak berurut, wadah untuk menu navigasi
<li> Item dari daftar navigasi
<a> Tautan ke halaman lain
flexbox CSS layout agar menu rata tengah dan sejajar horizontal

Baca Juga:
Cara Mewarnai Teks dengan CSS

Tips Tambahan

  • Gunakan media queries untuk membuat navbar responsive.
  • Tambahkan logo di sebelah kiri menggunakan <img>.
  • Gunakan hamburger menu dengan JavaScript untuk tampilan mobile.

Kesimpulan

Itulah tadi artikel dari kodeviolet.com tentang cara membuat navbar pada HTML dan CSS. Dengan struktur yang sederhana dan CSS yang tepat, kalian bisa membuat tampilan navigasi yang menarik dan user-friendly. Selamat mencoba dan jangan lupa eksplorasi lebih jauh ya!

Posting Komentar