Barru Navigasi CSS

Demo: Baris navigasi

Baris navigasi vertikal

Baris navigasi horisontal


Baris navigasi

Navigasi yang mudah digunakan penting bagi setiap situs web.

Dengan menggunakan CSS, Anda dapat mengubah menu HTML yang menonjol menjadi baris navigasi yang indah.

Baris navigasi = daftar tautan

Baris navigasi memerlukan HTML standar sebagai dasar.

Dalam contoh kami, kami akan menggunakan daftar HTML standar untuk membangun baris navigasi.

Baris navigasi biasanya adalah daftar tautan, jadi menggunakan elemen <ul> dan <li> sangat berarti:

Contoh

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Coba Sendiri

Sekarang, hapus tanda daftar, margin dan padding (isian) dari daftar:

Contoh

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Coba Sendiri

Penjelasan Contoh:

  • list-style-type: none; - Hapus daftar tanda. Baris navigasi tidak memerlukan tanda daftar.
  • atur margin: 0; dan padding: 0; Hapus pengaturan bawaan pengguna.

Kode di contoh di atas adalah kode standar yang digunakan di bingkai navigasi vertikal dan horizontal, Anda akan belajar lebih banyak tentang hal ini di bab berikutnya.