CSS : Navigation Bar

assalamualaikum wr. wb.
Kali ini postingan saya tentang bar navigasi.

Latar Belakang
Setiap situs web penting memiliki bar navigasi yang mudah digunakan oleh pengguna. Dengan css, navigasi bar dapat diubah tampilannya menjadi lebih bagus.

Tujuan
Memahami cara pembuatan navigasi.

Bar Navigasi
Sebuah navigasi memerlukan perintah HTML standar sebagai dasar. Navigasi pada dasarnya adalah daftar link, sehingga memerlukan elmen <ul> dan <li>.

Untuk membuat sebuah navigasi, kita harus membuat daftar link terlebih dahulu,

<ul>
  <li><a href="url">Home</a></li>
  <li><a href="url">News</a></li>
  <li><a href="url">Contact</a></li>
  <li><a href="url">About</a></li>
</ul>

jika kita lihat di web browser, maka akan tampil daftar linknya

Selnajutnya kita akan menghapus tanda lingkaran kecil hitam di depan setiap link, dan mengatur margin serta padding, caranya dengan menabahkan kode berikut di dalam style cssnya,

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

maka tanda lingkaran kecil hitam yang terdapat didepan link akan hilang,

list-style-type: none; berfungsi menghapus tanda, karena sebuah navigasi biasanya tidaj memerlukan penanda.
margin: 0; dan padding: 0; mengatur pengaturan browser default.

Bar Navigasi Vertikal
Jika kita akan membuat bar navigasi dengan arah vertikal, maka kita perlu mengatur elemen <a>, dengan menambahkan kode berikut dibawah kode tadi,

li a {
    display: block;
    width: 70px;
    background-color: #bbbbbb;
}

display: block; mengatur link sebagai elemen block sehingga membuat tautan di sekitar link dapat di klik, tidak hanya teksnya saja, dan kita dapat mengatur width, padding, margin, height, dll jika perlu.
Hasil dari yang sudah kita atur akan menjadi seperti ini :

Kita juga dapat mengatur lebar <ul>, dan menghapus lebar <a>, karena kedua elemen akan mengambil lebar penuh yang tersedia ketika ditampilkan sebagai elemen blok.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 70px;
}
li a {
    display: block;
    background-color: #bbbbbb;
}

Stye diatas akan tetap menghasilkan hasil yang sama seperti style sebelumnya, disini saya hanya mengganti lebar dari <a> ke <ul>.
Lalu saya akan mengubah warna bakcground dari link ketika kursor mouse digerakan diatasnya, style yang saya atur adalah seperti berikut,

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #bbbbbb;
}
li a {
    display: block;
    color: #000;
    padding: 10px 16px;
    text-decoration: none;
}
/* Mengubah warna link di hover */
li a:hover {
    background-color: #555;
    color: white;
}

dan hasil yang ditampilkan dari web browser akan seperti berikut, saat kursor mouse digerakan diatas link, warna backgroundnya akan diubah,

Saya menambahkan kelas active untuk membuat warna link berbeda saat sedang aktif, gunanya memudahkan pengguna mengetahui halaman mana yang sedang dikunjungi lewat link yang aktif tersebut,

.active {
    background-color: red;
    color: white;
}

Hasilnya seperti gambar berikut, menunjukan bahwa link home sedang aktif atau sedang dikunjungi

Bar Navigasi Horizontal
Jika ingin membuat navigasi horizontal, style cssnya adalah seperti berikut,

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #bbbbbb;
}
li {
    float: left;
}
li a {
    display: block;
    color: #000;
    padding: 10px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: #555;
    color: white;
}
.active {
    background-color: red;
    color: white;
}

Tampilan di web browser akan jadi seperti berikut,

Sekian postingan saya mengenai navigation bar, terimakasih, semoga bermanfaat.
wassalamualaikum wr. wb.

Referensi :
- http://www.w3schools.com/css/css_navbar.asp