Tutorial : Navigation With Hover #7

Assalamualaikum & Salam Sejahtera

Hai semua , LOL . Kali ni nak bagi satu lagi tutorial navigation . Biasa je navigation ni . Lebih kurang yang macam aku pakai . Tapi dah ubah sikit bagi ada hover. Sesuai untuk semua template . Navigation ni letak bawah header cun . Hehehe , meh sini tengok preview-nya ;

LIVE PREVIEW

Okay , macam itu navigation kali ni . Nak pakai sila komen dahulu ya . Credit terpulang . Tq ;


Template Designer ; Dashboard > Layout > Add a Gadget > HTML & JavaScript

Classic Template ; Dashboard > Template > Edit HTML

<style>
.abc a {
background:#fff;
color:black;
font:9px cambria;
margin:4px;
text-decoration :none;
display:inline-block;
width:90px;
text-transform:uppercase;
text-align:center;
letter-spacing:2px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.abc a:hover {
opacity:0;
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
}
</style>
<center>
<div style="background:#000; width:730px; text-align:center;padding-bottom:2px;padding-top:0px;">
<div class="abc">
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
<a href="LINK">Navigation</a>
</div></div>
</center>

P/S ; Mana mana yang di bold kan tu , korang boleh ubah ikut citarasa korang .