Belajar CSS : Membuat Navigation Bar

Hallo temen semua, pada kesempatan kali ini saya akan memposting materi tentang Navigation Bar dari pengertian dan bagaimana membuatnya.

CSS NAVIGATION BAR
Navigation Bar adalaha bagian dari antar muka pengguna grafis dimaksudkan untuk membantu pengunjung dalam mengakses informasi. Navbar diimplementasikan dalam browser file, web browser dan sebagai elemen desain dari beberapa situs web.https://en.wikipedia.org/wiki/Navigation_bar


Berikut ini adalah contoh membuat Navigation Bar.

Agar tampilan bisa seperti diatas bisa mengikuti script yang dibawah ini : 

Penjelasan :

•  list-style-type: none; digunakan untuk menghapus peluru pada list. Karena sebuah navbar tidak memerlukan penanda list.
• margin: 0; dan padding: 0; untuk mengatur pengaturan browser default.
• overflow: hidden;
• border: 1px solid #e7e7e7 properti ini digunakan untuk mengatur pembatas.
• background-color: #000000; properti digunakan untuk mengatur warna latar belakang.
• float: left; Dengan menggunakan float, elemen HTML bisa didorong ke kanan ataupun ke kiri.
• display: block; untuk menampilkan link sebagai elemen blok membuat seluruh tautan daerah yang dapat diklik.
• color : white, digunakan untuk mengatur warna pada teks.
• text-align: center; digunakan untuk mengatur tulisan agar posisinya ketengah.
• padding: 14px 16px; untuk mengatur jarak pada ruang yang didalam.
• li a:hover {bacground-color: #0000ff } apabila mouse pengguna di atas link tersebut maka akan muncul warna biru.

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


Sekian dan terimakasih