Belajar CSS Part 14 Navigation Bar
Assalamualaikum Wr. Wb.
PENGERTIAN
Navigation Bar merupakan sebuah properti yang ada di dalam CSS. Properti ini memiliki fungsi untuk membuat menu yang berada di HTML menjadi navigasi yang menarik. Dalam kata lain properti ini bisa membuat menu pada web lebih keren & menarik.
LATAR BELAKANG
Pada dasarnya tampilan menu merupakan hal yang penting di dalam sebuah web. Tapi kebanyakan web menganggap menu bukanlah hal yang penting, jadi tampilan sederhana pun tak masalah. Dari sinilah saya mencoba mengubah menu tersebut dengan CSS ini agar menghasilkan tampilan menu yang kerenlah.
MAKSUD & TUJUAN
- Membuat tampilan menu lebih menarik.
- Memberikan efek mouse over pada navigasi bar.
- Dapat mengatur posisi dari menu.
ALAT & BAHAN
- Laptop/PC
- Text Editor
- Browser
LANGKAH KERJA
Di dalam CSS properti ini memiliki beberapa fungsi, fungsi- fungsi tersebut antara lain.
- Navigation Bar = List of Links
Pada dasarnya sebuah bar navigasi itu menggunakan daftar link, sehingga navbar tersebut menggunakan tag <ul> dan <li> serta <a> untuk link.
Contoh :
Untuk membuat sebuah navigasi itu menggunakan list, dan untuk menambahkan link dengan tag <a>.
Hasil di atas merupakan tampilan sederhana dari sebuah navigasi bar.
- Vertical Navigation Bar
Properti ini berfungsi untuk membuat sebuah navigasi bar secara vertical atau menurun.
Contoh :
Untuk membuat navigasi bar secara vertikal dapat menggunakan attributes display pada listnya.
Simpan dan lihat hasilnya.
- Active/Current Navigation Link
Properti ini berfungsi memberikan efek aktif pada link bar saat ini. Jadi properti ini berguna untuk memberitahukan kepada pengunjung menu mana yang sedang dipilih.
Contoh :
Contoh :
Membuat link active dengan menambahkan attribute active pada tag hyperlink <a> .
Hasil akan kelihatan pada daftar yang di input class active pada kode html di atas.
- Full-height Fixed Vertical Navbar
Properti ini memungkinkan untuk membuat menu berada di samping konten, dengan kata lain konten terlihat full dan menu navigasi berada si sebelah konten.
Contoh :
Memposisikan navbar berada di samping konten, dan konten terlihat penuh.
Navigasi bar ini tergantung pada selera anda mau diposisikan di mana itu terserah anda. Silahkan mencoba ^^.
- Horizontal Navigation Bar
Properti ini berfungsi untuk membuat navigasi bar secara mendatar, atau bisa dibilang memposisikan navbar secara mendatar.
Contoh :
Nb : Untuk membuat navigasi bar secara horizontal, anda bisa menambahkan attribute display:inline ke dalam daftar tersebut.
Contoh hasilnya akan terlihat seperti gambar dia atas.
- Floating List Items
Properti ini berfungsi untuk memposisikan elemen yang ada di dalam HTML. Pada navigasi bar properti ini dapat menempatkan menu di sebelah kanan maupun kiri.
Contoh :
Untuk memposisikan menu di dalam navigasi bar, dapat dilakukan dengan menambahkan attribute "float:left" di dalam kode CSS.
Hasilnya gambar terlihat berada di ujung kanan dan yang lainnya berada di kiri.
Border Dividers
Properti ini berfungsi memberikan efek border atau batas pada menu navigasi bar.
contoh penggunaannya seperti berikut.
Dengan menambahkan attribute border:right untuk membuat batas antar menu.
Hasilnya seperti di atas, border berada di kanan menu dan terlihat jelas perbedaan setiap menu.
- Floating List Items
Properti ini berfungsi untuk memposisikan elemen yang ada di dalam HTML. Pada navigasi bar properti ini dapat menempatkan menu di sebelah kanan maupun kiri.
Contoh :
Untuk memposisikan menu di dalam navigasi bar, dapat dilakukan dengan menambahkan attribute "float:left" di dalam kode CSS.
Hasilnya gambar terlihat berada di ujung kanan dan yang lainnya berada di kiri.
Mungkin ini dulu dari saya, kurang lebihnya mohon maaf.
Syukron
Wassalamualaikum Wr. Wb.
Referensi
No comments:
Post a Comment