Membuat Bar Navigasi Dengan CSS

Membuat Bar Navigasi Dengan CSS

Navigation Bars

Memiliki navigasi yang mudah digunakan adalah penting untuk membangun situs web.

CSS dapat digunakan untuk mengubah menu HTML dari yang sederhama menjadi lebih menarik dengan menambahkan navigation bars.

Navigation bar = Daftar Tautan

Bilah navigasi membutuhkan beberapa tautan dengan menggunakan HTML standar sebagai dasarnya.

Navigation bar pada dasarnya adalah daftar tautan, dengan menggunakan elemen <ul> dan <li> :

Contoh

<!DOCTYPE html>
<html>
<body>

<ul>
  <li><a href="#home">Beranda</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Kontak</a></li>
  <li><a href="#about">Tentang</a></li>
</ul>

<p>Catatan: gunakan href="#" untuk menguji tautan. Di situs web yang sebenarnya # akan diisi dengan URL.</p>

</body></html>

Jalankan Contoh

Kemudian dari contoh di atas, hapus bullet dan margin serta padding dari list:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

<p>Dalam contoh ini, point/penanda list, padding dan margin akan dihapus.</p>

<ul>
<li><a href="#home">Beranda</a></li>
<li><a href="#news">Berita</a></li>
<li><a href="#contact">Kontak</a></li>
<li><a href="#about">Tentang</a></li>
</ul>

</body></html>

Jalankan Contoh

Penjelasan :

  • list-style-type: none; Digunakan untuk menghilangkan bullet karena pada umumnya Navigation bar tidak memerlukan penanda list
  • Tetapkan margin: 0; dan padding: 0; untuk menghapus pengaturan default browser

Kode pada contoh di atas adalah kode standar yang digunakan di navigation bar secara vertikal dan horizontal.

Tutorial sebelumnya : Opacity Atau Transparansi Dengan CSS
Tutorial setelahnya : Membuat Bar Navigasi Vertikal Dengan CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan