MulaiCode
CSS

CSS Vertical Navigation Bar

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

CSS Vertical Navigation Bar

Navigasi bar vertikal adalah elemen navigasi yang ditampilkan secara vertikal di sisi halaman. Ini sering digunakan dalam aplikasi atau halaman yang memiliki banyak menu dan perlu lebih banyak ruang untuk menyajikan tautan navigasi.

1. Struktur Dasar Navigasi Bar Vertikal

Navigasi bar vertikal biasanya menggunakan elemen ul dan li yang ditata secara vertikal menggunakan CSS.

<style>
  .vertical-navbar {
    background-color: #333;
    padding-top: 20px;
  }
  
  .vertical-navbar a {
    display: block;
    color: white;
    padding: 14px;
    text-decoration: none;
    text-align: center;
  }
  
  .vertical-navbar a:hover {
    background-color: #ddd;
    color: black;
  }
</style>
 
<div class="vertical-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 Vertikal

Flexbox dapat digunakan untuk menyusun item dalam navigasi bar vertikal, membuat tata letak lebih fleksibel.

<style>
  .vertical-navbar {
    display: flex;
    flex-direction: column;
    width: 200px;
    background-color: #333;
    padding-top: 20px;
  }
  
  .vertical-navbar a {
    color: white;
    padding: 14px;
    text-decoration: none;
    text-align: center;
  }
  
  .vertical-navbar a:hover {
    background-color: #ddd;
    color: black;
  }
</style>
 
<div class="vertical-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 Vertikal Responsif dengan Media Queries

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

<style>
  .vertical-navbar {
    background-color: #333;
    padding-top: 20px;
    width: 250px; /* Menetapkan lebar tetap untuk desktop */
    transition: width 0.3s ease;
  }
 
  .vertical-navbar a {
    display: block;
    color: white;
    padding: 14px;
    text-decoration: none;
    text-align: center;
  }
 
  .vertical-navbar a:hover {
    background-color: #ddd;
    color: black;
  }
 
  @media screen and (max-width: 1024px) {
    .vertical-navbar {
      width: 200px; /* Lebar yang lebih kecil pada tablet */
    }
  }
 
  @media screen and (max-width: 600px) {
    .vertical-navbar {
      width: 100%; /* Lebar penuh pada perangkat mobile */
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh; /* Menutupi seluruh layar */
      z-index: 999;
    }
 
    .vertical-navbar a {
      text-align: left;
      padding-left: 20px; /* Memberikan padding lebih besar di sisi kiri */
    }
  }
</style>
 
<div class="vertical-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 Vertikal

PropertiDeskripsi
background-colorMengatur warna latar belakang navigasi bar.
colorMengatur warna teks pada tautan.
display: blockMenyusun elemen navigasi dalam urutan vertikal.
paddingMenambahkan ruang di sekitar elemen tautan.
@mediaMengubah gaya elemen sesuai dengan ukuran layar.

CSS Navigation Bar

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

CSS Horizontal Navigation Bar

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

On this page