Cara Membuat Menu Bar Horizontal Keren Menggunakan CSS

Menu Bar, itulah yang akan Bangiz bahas kali ini. Setelah sebelumnya saya 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 menambhakan HTML/Javascript di sini.
 

 

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

Keterangan:

• 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