Thursday, 3 January 2013

Simple Tab Menu

Salam Sejahtera !

Hari nie Mai nak buat tuto Tab Menu . . (credit Nabila Medan)


<style>
.tabmenu1 {
text-align:center;
width:260px;
color:#333333
}
a.tabmenu {
cursor:vertical-text;
background: pink;
width:84px;
text-decoration:none;
color:#333333;
display:inline-block;
padding-top:10px;
padding-bottom:10px;
text-align:center;
font:12 georgia;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
a.tabmenu:hover {
background: #000;
color:#fff;
-webkit-transition-duration:0.5s;
}
#menu img { max-width:260px;}
 </style>
<center><div class="tabmenu1">
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav1').innerHTML" >TAJUK 1</a>
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav2').innerHTML" >TAJUK 2</a>
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav3').innerHTML" >TAJUK 3</a>
<div id="menu" style="width:260px;color:#333333;font:12px verdana;">
WELCOME
</div>
<div id="nav1" style="display: none;">
ISI 1
</div></div>
<div id="nav2" style="display: none;">
ISI 2
</div>
</div>
<div id="nav3" style="display: none;">
ISI 3
</div></div>
</div></div>
1. Dashboard > Layout > Add a Gadget > HTML/Javascript

2.Copy & paste code kat atas tue 

#Pink = tukar warna yang korang nak 
000 =  tukar code warna backgroun tab menu yang korang nak
Tajuk 1, 2, 3 = buat tajuk tab menu korang (cth : Music, Banner @ Follower)
Isi 1, 2, 3 = copy & paste code kat situ (cth : code banner korang ke)

3. Save ! 

p/s :: Kalau korang buat tak jadi , drop komen kat Comment Box @ Shoutbox ek :)

End !