Bangiz - Menu Bar, itulah yang akan admin bahas kali ini. Setelah sebelumnya admin share tentang Cara Membuat Kotak Berlangganan Feedburner Subscribe dan Sosial Media dan Cara Membuat Sosial Media Animasi Berputar. Kali ini tentunya masih berhubungan dengan cara mempercantik blog.
Oke tanpa basa-basi lagi saya langsung saja beri kode scriptnya berikut ini. Kalau sudah diberi kode masih bingung, saran saya baca dulu cara menambahkan HTML/Javascript.
<style> /*-----Horizontal navigation menu from bangiz.blogspot.com------*/ #nav_hr1 { width:100% } #nav_hr1 ul { list-style:none; margin:0; padding:0; overflow:none;/*Hide the overflow */ } #nav_hr1 ul li { float:left; } #nav_hr1 ul li a:link,#nav_hr1 ul li a:visited { display:block; width:120px; font-weight:bold; color:#8db600; background:#981b1e; text-align:center; text-decoration:none; text-transform:capitalize; padding:6px 0px; } #nav_hr1 ul li a:hover,#nav_hr1 ul li a:active { background:#a609a9; -webkit-transition:background .2s ease-in ; -moz-transition:background .2s ease-in ; transition:background .2s ease-in ; } #nav_hr1 ul li a:hover{ -moz-opacity:0.90; -khtml-opacity:0.90; filter:alpha(opacity=90%); opacity:0.90; } #nav_hr1 ul li a:active { -webkit-box-shadow:inset 1px 1px 1px 1px #188989; -moz-box-shadow:inset 1px 1px 1px 1px #188989; box-shadow:inset 1px 1px 1px 1px #188989; color:#FF3300; opacity:0.85; -moz-opacity:0.85; -khtml-opacity:0.85; filter:alpha(opacity=85%); -webkit-transition:all .2s cubic-bezier .1s; -moz-transition:all .2s cubic-bezier .1s; transition:all .2s cubic-bezier .1s; top:12px; } </style> <div id="nav_hr1"> <ul> <li><a href="#" >Beranda</a></li> <li><a href="#" >Produk</a></li> <li><a href="#" >Pelayanan</a></li> <li><a href="#" >Harga</a></li> <li><a href="#" >Blog</a></li> <li><a href="#" >Kontak</a></li> </ul> </div>
Hasilnya akan seperti ini:
 |
| Menu bar horizontal |
Keterangan:
Sekian tips kali ini tentang bagaimana cara membuat menu bar horizontal keren dengan menggunakan kode CSS. Bagikan tulisan ini silahkan gunakan tombol jejaring sosial di bawah.
- Silahkan ganti tanda # dengan alamat URL yang Anda inginkan beserta judulnya.
- Anda juga bisa menyesuaikan lebarnya.
- Begitu juga dengan warnanya, lihat di sini untuk melihat kode warna.
Sekian tips kali ini tentang bagaimana cara membuat menu bar horizontal keren dengan menggunakan kode CSS. Bagikan tulisan ini silahkan gunakan tombol jejaring sosial di bawah.
