Membuat Navbar website dengan html dan css
tidak sesulit yang dibayangkan, asal mengerti konsep dan penggunaan fungsi dari properti-properti CSS, kita bisa membuat navbar sendiri dengan mudah.
Ada beberapa macam navbar yang biasa ada di website, ada yg bersifat float(mengambang pada halaman) ada juga yang static (posisi normal). Oke to the point biar langsung ngerti, ikutin step-step dibawah ini.
Buatlah markup HTML navigasinya terlebih dahulu
1 2 3 4 5 6 7 8 | <nav> <ul> <li><a href="home.html">home</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> <li><a href="help.html">help</a></li> </ul> </nav> |
Kita gunakan tag HTML nav karena memang tag tersebut khusus digunakan untuk kita membuat navigasi dalam sebuah website. Untuk informasi lanjutnya, bisa dibaca di halama ini
Selanjutnya berilah sentuhan CSS nya :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | body{ margin: 0; font: normal 12px verdana, tahoma; } nav{ display: block; background-color: #4679BD; } nav ul{ margin: 0; padding: 0; list-style: none; } nav ul > li{ display: inline; } nav ul > li > a{ display: inline-block; padding: 8px 12px; border-right: #4072B4; text-decoration: none; color: #fff; text-transform: capitalize; } nav ul > li > a:hover{ background-color: #4072B4; } |
Bingung ga bro? 
baik, untuk hasil navbarnya bisa anda lihat di halamain ini yang sudah saya siapkan. Silahkan dijajal disana agar bisa lebih mengerti dan advance dalam membuat navigasi bar pada website, kalau bingung dan ada yang ingin ditanyakan tentang kode tersebut, silahkan tulis pertayaan anda di kolom komentar. Semoga bermanfaat!