Blue Navigation Bar

Blue Navigation Bar - Pada kesempatan yang lalu saya membuat artikel tentang Attitude Navigation Bar , sebuah menu yang tampak besar bak orang yang kekenyangan saat buka puasa , tapi tetep cakep hehe . Nah kesempatan kali ini  untuk memberikan pilihan saat brada membutuhkan sebuah menu , saya akan membagikan sebuah menu yang hampir mirip dengannya namun ada sedikit perbedaan pada warna dan style nya , tapi saya fikir menu kali ini gak kalah keren dari menu sebelumnya. Oks sambil nungguin adzan maghrib brada lihat demonya dibawah ini .

Kelebihan Blue Navigation Bar 

• Sangat akrab dengan browser Firefox , Opera , Google Chorme , bahkan dengan Internet Explorer sekalipun
• Loading extra cepat 

Kustomisasi menu

• Klik Tab " Tata Letak "
• Klik " Tambah gadget "
• Cari Tab " HTML/Javascript
• Masukan kode dibawah ini 

<style type="text/css">
#menu9 ul {
list-style:none;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
}
#menu9 ul li{
float:left;
}
#menu9 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#00adef;
width:170px;
text-align:center;
}
#menu9 ul li a span{
display:block;
}
#menu9 ul li a span.title{
color:#fff;
border-bottom:2px solid #fff;
padding-bottom:5px;
}
#menu9 ul li a:hover{
}
#menu9 ul li a:hover span.title{
color:#074a64;
border-bottom:2px solid #0b6f95;
}
#menu9 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#074a64;
visibility:hidden;
}
#menu9 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible;
}
</style>
<h2>Menu 9</h2>
<div id="menu9">
<ul>
<li><a href="#">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="#">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="#">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="#">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>

• # ganti dengan URL brada
• Save dan lihat hasilnya

Selamat menjalankan ibadah puasa