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.
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