poppinsteff.

Tutorials Freebies Downloads Tips and Tricks Themes

Vertical Tab Menu

Sunday, 22 January 2012 @ 00:11

Heyho, allz !

Okay, tab menu ni bentuk vertical. So, let's get start.

Pergi Template. Pastekan kod bawah sebelum </style>

a.wink {
background: url(URL IMG);
padding: 1px;
letter-spacing: 2px;
display: inline-block;
width: 200px;
color: #ffffff;
-webkit-transition-duration: 0.5s;
font-family: Arial;
font-size: 10px;
text-align: center;
text-transform: normal;
}

a.wink:hover {
background: url(URL IMG);

width: 300px; 
-webkit-transition-duration: 0.5s;
color: #ffffff;
}

Merah : URL gambar
Biru : Kelebaran vertical.
Hijau : Warna Font
Oren : Font
Gold : Saiz Tulisan
Purple : Text align
Pink : Text transform

Next, pastekan kod di bawah pula selepas table sidebar

<center>
<a class="wink" onClick="document.getElementById('entry').innerHTML=document.getElementById('entry').innerHTML" title="Entry">Home</a>
<a class="wink" onClick="document.getElementById('entry').innerHTML=document.getElementById('me').innerHTML" title="Owner">About</a>
<a class="wink" onClick="document.getElementById('entry').innerHTML=document.getElementById('tuto').innerHTML" title="Stuffs">Tutorials</a> </center>

0 Comments:

Post a Comment