Membuat Navbar pada HTML dan CSS

Hallo semua, kali ini Kami akan membuat sebuah tutorial untuk membuat navbar sederhana pada HTML dan CSS. Sebelumnya, Kamu harus paham dulu konsep dari HTML itu sendiri.

HTML memiliki beberapa element, salah satunya yaitu <nav>. Nav adalah element pada HTML yang dibuat untuk mempresentasikan link navigasi. Bisa dibilang, nav adalah wadah dari link yang akan men direct kita ke halaman lain. Tetapi link yang berada pada element <nav> biasanya adalah link major yang merujuk kepada halaman lain pada website kita. Misalkan menunjukan link halaman utama,gallery dll.

Pada pengetikan sintaks kita dapat menggunakan berbagai macam code editor, misalkan Notepad++ atau Sublime. Pemilihan code editor bisa bebas sesuai dengan yang kita inginkan.

Implementasi

Berikut adalah contoh sederhana penulisan kode HTML untuk navigation bar.

<nav>
 <a href="/home/">Halaman Utama</a> |
 <a href="/gallery/">Gallery</a> |
 <a href="/contact/">Contact Us</a> |
</nav>

Berikut adalah contoh lain dari pembuatan nav pada HTML: 

Membuat Navbar dengan menambahkan CSS

Setelah Kita selesai mencoba membuat navbar sederhana, Kita dapat menambahkan CSS untuk membuat navbar lebih bagus dan enak dilihat.

Berikut Contoh Penggunaan Nav dengan ditambahkan CSS

Berikut adalah kode untuk menampilkan navbar seperti gambar di atas:

Penjelasan:

display: block; Digunakan untuk membuat display link menjadi sebuah bentuk.

:hover pada CSS maksudnya adalah action yang kita buat pada selector hover akan berjalan saat cursor kita diarahkan pada object tersebut.

display: inline-table; Berfungsi untuk membuat object sejajar dengan object lainnya.

Pembuatan Dropdown Pada Nav

Setelah membuat navbar yang sederhana, sekarang Kita akan mencoba menambahkan fitur dropdown pada navbar. Dropdown adalah fitur dimana saat Kita menggerakan mouse kepada link nav tersebut, akan muncul daftar - daftar link lain yang terdapat didalam link pertama.

Berikut adalah kode programnya: 

Bagaimana Dropdown bisa terjadi ?

Karena saat pertama dijalankan, CSS pada selector nav ul ul ber-display none. Dan pada saat kita hover akan berubah menjadi block. Perubahan tersebut akan memunculkan konten nav ul ul saat kita hover. Dan ditambahkan property-property lain agar rapih.

Demikianlah tutorial yang bisa Kami share kali ini, semoga tutorial kali ini bermanfaat untuk kedepannya. Semoga wawasan kalian tentang HTML dan CSS bertambah. Janganlah berhenti belajar karena hidup tak pernah berhenti mengajarkan.

Sumber : http://www.w3schools.com/tags/tag_nav.asp

Materi Html ke :

. . . . . . . . . . . . . . . . . . . . . . 1  2  3  4  5  6  7  8  9  10 . . . . . . . . . . . . . . . . . . . . . .