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 


Artikel Menarik Lainnya :