Tutorial :Tab Menu di Sidebar - Mieza S Mieza S: Tutorial :Tab Menu di Sidebar

Tutorial :Tab Menu di Sidebar

March 03, 2013





Apabila tab menu ditekan, maka paparan yang korang lihat akan terkeluar.


1. Dashboard --> Layout --> Add Gadjet --> HTML/ Java Script --> copy coding ni.


<style>
.kotak navigation {
text-align:left;
width:290px;
color:#333333
}
a.navigation {
cursor:vertical-text;
background-image:url(URL BACKGROUND);
width:75px;
text-decoration:none;
color:#333333;
display:inline-block;
border:2px outset #cecece;
text-align:center;
font:14px Yanone Kaffeesatz;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
a.navigation:hover {
border:2px ridge #cecece;
background-image:url(URL BACKGROUND);
background-position:50% 80%;
background-size:400px;
color:#fff;
-webkit-transition-duration:0.5s;
}
#fh img { max-width:260px;}
 </style>
<center><div class="kotaknavigation">
<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('a').innerHTML" >Tajuk 1 </a>
<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('b').innerHTML" >Tajuk 2</a>
<a class="navigation" onclick="document.getElementById('fh').innerHTML=document.getElementById('c').innerHTML" >Tajuk 3</a>
</div></center>
<div id="fh" style="width:270px;color:#333333;font:12px verdana;">
<br /><br /><br />
<center>
Something yang korang nak paparkan before menu tab di click
 </center>
</div>
</center></div>
<div id="a" style="display: none;">
Something yang korang nak paparkan di tajuk 1
</div>
<div id="b" style="display: none;">
Something yang korang nak paparkan di tajuk 2
</div>
<div id="c" style="display: none;">
Something yang korang nak paparkan di tajuk 3
</div>


Paste di ruangan content --> Save


1 comment:

terima kasih kerana meluangkan masa membaca dan meninggalkan komen.