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
haduh.. euy, nunggu adzan maghrib masih lama..
BalasHapussebelum hover tampilan simple banget, mirip tampilan defalut dari bawaan blogger pas di pencet kelihatan cakepnya :D .
Satu jam lagi kok miz..beduknya
HapusJangan di pencetin trus loh..ntar dol..repot..hehe :)
wkwkwk .. apanya yg dol mas bud ???
Hapushaha apanya yang dipencetin hehehe
Hapuskeren nih navigation menunya mas.
BalasHapuskalau keren silahkan dicoba sob
HapusKalo udah mahir coding...mudah aja ya kang..utak atik langsung jadi tutor keren deh..hehe :)
BalasHapusmungkin cuma ini aja yg tau nya mas bud ...
Hapusweeeyyyy... kereeeen.. mohon bimbingan buat newbie dari mastah nihh
BalasHapussama-sama newbie jadi bingung neh hehe
Hapusilmu baru nih, saya demen banget kalau yang bisa akrab sama chrome..simpen ah
BalasHapusyang rapih simpennya kang... nanti jatooh
Hapusizin simpen dulu kang... baca heula nanti kalau sudah paham baru praktek...
BalasHapusTemplate blogna alus euy... naksir dahhh
cantik banget sob navigasi bar nya, tapi gak cocok sama template saya hehe, ^_^
BalasHapusane coba nanti yah sob diblog saya hehe :)
BalasHapusWih Keren Banget....
BalasHapusDO NOT COPY MY CODES AND ARTICLES FROM AVDHOOTBLOGGER.
BalasHapusREMOVE ALL OF MY ARTICLES OR I WILL COMPLAINT TO DMCA FOR DELETION OF YOUR BLOG.