MulaiCode
CSS

CSS Horizontal Navigation Bar

Pelajari cara membuat navigasi bar horizontal menggunakan CSS dengan menggunakan teknik flexbox dan pengaturan gaya responsif.

CSS Horizontal Navigation Bar

Navigasi bar horizontal adalah elemen navigasi yang ditampilkan secara horizontal di bagian atas halaman, sering digunakan untuk menampilkan menu atau tautan navigasi yang lebih sederhana dan terstruktur.

1. Struktur Dasar Navigasi Bar Horizontal

Navigasi bar horizontal biasanya menggunakan elemen ul dan li yang disusun secara horizontal dengan menggunakan properti display: inline atau display: flex.

<style>
  .navbar {
    background-color: #333;
    overflow: hidden;
  }
 
  .navbar a {
    float: left;
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    text-align: center;
  }
 
  .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 Horizontal

Flexbox sangat membantu untuk membuat navigasi bar horizontal yang lebih fleksibel dan responsif.

<style>
  .navbar {
    display: flex;
    background-color: #333;
    justify-content: center;
    align-items: center;
  }
 
  .navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
  }
 
  .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 Horizontal Responsif dengan Media Queries

Agar navigasi bar horizontal dapat beradaptasi dengan berbagai ukuran layar, kita dapat menggunakan media queries untuk mengubah gaya tampilan pada perangkat yang lebih kecil.

<style>
  .navbar {
    display: flex;
    background-color: #333;
    justify-content: center;
    align-items: center;
  }
 
  .navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
  }
 
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
 
  @media screen and (max-width: 600px) {
    .navbar {
      flex-direction: column;
    }
  }
</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 Horizontal

PropertiDeskripsi
background-colorMengatur warna latar belakang untuk navbar.
display: flexMenggunakan flexbox untuk menyusun item secara horizontal.
justify-contentMengatur penataan item secara horizontal (misalnya center).
align-itemsMenyusun item secara vertikal di tengah navbar.
flex-directionMenyusun item secara vertikal pada perangkat kecil dengan media queries.
@mediaMengubah gaya navbar berdasarkan ukuran layar perangkat.

CSS Vertical Navigation Bar

Pelajari cara membuat navigasi bar vertikal menggunakan CSS, dengan menggunakan teknik flexbox dan media queries untuk tata letak responsif.

CSS Dropdowns

Pelajari cara membuat dropdown menu menggunakan HTML dan CSS untuk navigasi yang interaktif.

On this page