HTML/CSS

Membuat Menu Navigasi Horizontal dan Vertical

Berikut adalah contoh penggunaan CSS untuk membuat menu navigasi horizontal dan vertical:

Menu Navigasi Horizontal:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman</title>
  <style>
    /* CSS untuk menu navigasi horizontal */
    .nav-horizontal {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .nav-horizontal li {
      display: inline-block;
      margin-right: 10px;
    }

    .nav-horizontal li a {
      text-decoration: none;
      color: #333333;
      padding: 5px;
    }
  </style>
</head>
<body>
  <ul class="nav-horizontal">
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tentang</a></li>
    <li><a href="#">Produk</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</body>
</html>

Dalam contoh di atas, kita menggunakan CSS untuk membuat menu navigasi horizontal dengan menggunakan elemen <ul> dan <li>.

  • .nav-horizontal: Digunakan untuk mengatur properti dasar dari menu navigasi, seperti menghilangkan tanda bullet dan memberikan margin dan padding nol.
  • .nav-horizontal li: Digunakan untuk mengatur setiap elemen menu navigasi agar tampil secara horizontal menggunakan display: inline-block dan memberikan jarak antara elemen menggunakan margin-right.
  • .nav-horizontal li a: Digunakan untuk mengatur properti dasar tautan dalam menu navigasi, seperti menghapus dekorasi tautan (text-decoration: none), memberikan warna teks (color), dan memberikan jarak antara teks dan batas elemen menggunakan padding.

Menu Navigasi Vertical:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman</title>
  <style>
    /* CSS untuk menu navigasi vertical */
    .nav-vertical {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    .nav-vertical li {
      margin-bottom: 10px;
    }

    .nav-vertical li a {
      text-decoration: none;
      color: #333333;
      padding: 5px;
    }
  </style>
</head>
<body>
  <ul class="nav-vertical">
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tentang</a></li>
    <li><a href="#">Produk</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</body>
</html>

Dalam contoh di atas, kita menggunakan CSS untuk membuat menu navigasi vertical dengan menggunakan elemen <ul> dan <li>.

  • .nav-vertical: Digunakan untuk mengatur properti dasar dari menu navigasi, seperti menghilangkan tanda bullet dan memberikan margin dan padding nol.
  • .nav-vertical li: Digunakan untuk mengatur setiap elemen menu navigasi agar tampil secara vertical dengan memberikan jarak antara elemen menggunakan margin-bottom.
  • .nav-vertical li a: Digunakan untuk mengatur properti dasar tautan dalam menu navigasi, seperti menghapus dekorasi tautan (text-decoration: none), memberikan warna teks (color), dan memberikan jarak antara teks dan batas elemen menggunakan padding.

Anda dapat menyesuaikan properti CSS sesuai dengan preferensi desain dan kebutuhan Anda untuk membuat menu navigasi yang sesuai dengan kebutuhan proyek Anda.

Related Articles

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Back to top button