Belajar CSS Part 17 : Navigation Bar

CSS NAVIGATION BAR

Assalamu'alaikum Wr. Wb

Hai sobat semua.. terima kasih sudah mengunjungi blog saya ini. Sebelumnya kita sudah belajar mengenai Tabel pada CSS, untuk materi selanjutnya kita akan belajar mengenai Navigation Bar pada CSS.

Langsung saja yuk...

Memiliki navigasi yang mudah digunakan adalah penting untuk setiap situs web. Dengan CSS kita dapat mengubah menu HTML yang membosankan menjadi navigasi bar yang keren.

Navigation Bar ada 2 jenis yaitu :
1. Navigation Bar Vertikal
2. Navigation Bar Horizontal


1. NAVIGATION BAR VERTIKAL
Untuk membangun sebuah navigasi bar vertikal, kita dapat menggayakan elemen <a> dalam list.
Contoh :

Hasilnya :

Contoh yang lain :
Full-height Fixed Vertical Navbar

Hasilnya :

2. NAVIGATION BAR HORIZONTAL
Ada 2 cara untuk membuat sebuah navigasi bar horizontal, mengunakan inline atau floating list item.
Contoh INLINE :

Penjelasan :

• display: inline; - Secara default, elemen <li> adalah elemen blok. Disini kita menghapus line break sebelum dan sesudah setiap daftar item, untuk menampilkan mereka pada satu baris.

Hasilnya :

Contoh Floating list item :

 Penjelasan :

• float : left; - Penggunaa float untuk mendapatkan blok elemen meluncur disamping satu sama lain
• display: block; - Menampilkan link sebagai elemen blok yang membuat seluruh daerah tautan dapat diklik (tidak hanya teks) dan memungkinkan kita untuk menentukan padding (dan tinggi, lebar, margin, dll)
• padding: 8px; - Untuk menentukan padding sehingga terlihat rapi
• background-color: #dddddd; - Menambahkan latar belakang abu-abu untuk masing-masing elemen.

Hasilnya :

FIXED TOP NAVIGATION
Contoh :

Hasilnya :

FIXED BOTTOM NAVIGATION
Contoh :

Hasilnya :

Silakan dicoba sendiri sobat, apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima kasih.

• Kesimpulan 

Melalui pembahasan dapat disimpulkan bahwa Navigasi bar ada 2 jenis yaitu Navigasi bar horizontal dan Navigasi bar vertikal, dalam pembuatan navigasi bar kita dapat menggunakan properti-properti CSS agar terlihat lebih indah dan keren.

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

Wassalamu'alaikum Wr. Wb