Attitude Navigation Menu Bar - Tutorial kali ini saya akan berbagai sebuah menu yang besar dan tampak kenyang , ibarat kata ni menu seperti baru habis buka puasa hehe ... Untuk lebih jelasnya silahkan brada cek demonya barangkali saja brada minat.
Kalau brada sekalian minat silahkan ikuti caranya .
#Kustomisasi
- Masuk pada tataletak
- Add Gadget / HTML Javascript
- Masukan kode dibawah ini kedalamnya
<style type="text/css">
#menu3 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
font-weight: bold;
letter-spacing: -2px;
line-height: 1.2em;
border-top:4px solid #000;
border-bottom:4px solid #666;
float:left;
clear:both;
margin:20px;
}
#menu3 ul li{
float:left;
}
#menu3 ul li a{
display:block;
text-decoration:none;
background-color:#ccc;
padding:10px 10px 5px 10px;
color:#666;
width:170px;
}
#menu3 ul li a span{
display:block;
text-align:center;
}
#menu3 ul li a span.title{
}
#menu3 ul li a:hover span.title{
color:#000;
}
#menu3 ul li a span.text{
padding:0px 5px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 2em;
text-align:right;
margin-top:-20px;
color:#f0f0f0;
font-weight:bold;
background-color:#000;
visibility:hidden;
}
#menu3 ul li a:hover span.text{
visibility:visible;
}
</style>
<div id="menu3">
<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>
Save dan lihat hasilnya
alanyar deui yeuh,,,,,jadi sok bingung anu mana anu dipakai,kabehana aralus atuh tutorna hadeuhhhh
BalasHapusGelis ya kang :)
HapusDede : meh teu bingung mah atuh sadayana we anggo kang ...hehe
HapusBudi : Not Gelis But Geulis mas ...
Kang Ruly sama mas Andes...ini pada jago ya buat tutorial...
BalasHapusMakannya apa sih... :)
Onde-onde Mas Budi.haha
HapusMas Bud : bahkan jarang makan mas hehe
HapusMuh Hendrik : wkwkwkwkwk padahal aku belum pernah makan itu pak guru ...
Jadi penasaran gimana hasil navigation menunya ini,izin coba dulu kodenya,thks yo :)
BalasHapussilahkan dicoba aja dulu , barangkali cucok he
Hapusluar biasa bang ruly ini. ini bener2 blog tutorial, blognya kontes.. saya ngurangi html, css, jquery. biar blog minimalis dan ringan sj.
BalasHapuskeren sih.. tapi mau di taruh dimana u___u .. .
BalasHapus