Hafiz Zulkafly

Tutorial : Navigation With Hover #6

Rabu, Jun 19, 2013

Assalamualaikum & Salam Sejahtera
Hari ni , nak bagi tutorial navigation with hover untuk versi ke-6. actually takde special features pon dekat navigation ni , tapi sesaja nak bagi tutorial ni bagi mengelakkan blog ni berhabuk tanpa sebarang update .





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

Classic Template ; Dashboard > Template > Edit HTML


<style>
.nav a{
background:#eee;
display:inline-block;
width:105px;
font:10px trebuchet ms;
margin:5px;
border:1px solid #e6e6e6;
text-align:center;
color:#858585;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.nav a:hover {
border-radius:10px;
box-shadow: inset 60px 8px 0px 0px #000, inset -60px -8px 0px 0px #000;
color:#fff;
}
</style>

<div class="nav">
<div style="text-align: center;">
<a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">LINK</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a><a href="PASTE YOUR LINK HERE">TITLE</a>
</div>
</div>

Save and Siap .

p/s : Mana mana yang boleh diubah , boleh la korang ubah mengikut citarasa korang ye . kbai o/

2 ulasan

  1. Sorry coz lupa siapa punya tuto wktu first2,btw tq coz mengingatkan and done credit to u, sye ada ubah skit code and hope awak tak kesah saye re-tuto..

    BalasPadam

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED