CSS Navigation Bar

Pelajari cara membuat navigasi bar menggunakan CSS, termasuk menggunakan flexbox untuk tata letak dan berbagai efek hover.

Navigasi bar adalah elemen penting dalam desain situs web. Ini memungkinkan pengguna untuk berpindah antara halaman atau bagian berbeda dalam situs web. Dengan CSS, kita bisa membuat navigasi bar yang responsif dan interaktif.

1. Struktur Dasar Navigasi Bar

Untuk membuat navigasi bar, kita biasanya menggunakan elemen nav dengan daftar ul dan elemen li.

<style>
  .navbar {
    background-color: #333;
    overflow: hidden;
  }
  
  .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
  }
  
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
</style>
 
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</div>

2. Menggunakan Flexbox untuk Navigasi Bar

Flexbox memungkinkan kita untuk lebih mudah mengatur tata letak elemen dalam navigasi bar.

<style>
  .navbar {
    display: flex;
    background-color: #333;
    justify-content: space-around;
    padding: 14px;
  }
  
  .navbar a {
    color: #f2f2f2;
    text-decoration: none;
    padding: 14px 20px;
  }
  
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
</style>
 
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</div>

3. Navigasi Bar Responsif dengan Media Queries

Untuk membuat navigasi bar responsif, kita bisa menggunakan media queries untuk menyesuaikan tata letak berdasarkan ukuran layar.

<style>
  .navbar {
    background-color: #333;
  }
  
  .navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
  }
  
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
 
  @media screen and (max-width: 600px) {
    .navbar a {
      float: none;
      display: block;
      text-align: left;
    }
  }
</style>
 
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</div>

Ringkasan Properti CSS untuk Navigasi Bar

Properti	Deskripsi
`background-color`	Mengatur warna latar belakang navigasi bar.
`text-decoration`	Menghapus garis bawah pada tautan.
`padding`	Memberikan ruang di sekitar teks tautan.
`float`	Menentukan posisi elemen dalam bar navigasi.
`display: flex`	Menata elemen navigasi menggunakan flexbox.
`justify-content`	Menyusun elemen secara horizontal dalam flex container.
`@media`	Mengubah gaya sesuai dengan ukuran layar.

CSS Navigation Bar

CSS Navigation Bar

1. Struktur Dasar Navigasi Bar

2. Menggunakan Flexbox untuk Navigasi Bar

3. Navigasi Bar Responsif dengan Media Queries

Ringkasan Properti CSS untuk Navigasi Bar

On this page