Tutorial : Jquery accordian tab menu

7:20:00 PM


Assalamualaikum and hello korang. Wassup ? Iman sihat ? XD

Another Requested tutorial

Korang nampak tak bahagian ping blog fafa tu ? Tu lah JQUERY ACCORDIAN TAB MENU.

Jum tuto guys :)

1. Layout > Add A Gadget > HTML/Javascript.




2. Copy code kat bawah ni dan paste kat HTML/Javascript tu.



<center><style type="text/css">
.slide {
width: 200px;
padding: 5px;
background: ;}
.slide2 {
padding:3px;
display:block;
height:20px;
width:205px;
background:#fff;
-webkit-transition-duration:.8s;
-moz-transition-duration:.8s;
overflow:hidden;}
.slide2:hover {
height: 180px;
}
nav1{
font-family:helvetica;
padding-top:1px;
font-size:12px;
color:#000;
text-align:center;
text-transform :uppercase;
background: #FFBAD7;
letter-spacing:2px;
height:25px;
padding-left:6px;
display:block;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;}

</style>
<div class="slide"><div class="slide2"><nav1>Tajuk 1</nav1>
<div style="height:180px; overflow:auto;margin-top:3px;">

ISI KOTAK 1</div></div></div>
<div class="slide"><div class="slide2"><nav1>tajuk 2</nav1>
<div style="height:180px; overflow:auto;margin-top:3px;">

ISI KOTAK 2</div></div></div>
<div class="slide"><div class="slide2"><nav1>tajuk 3</nav1>
<div style="height:180px; overflow:auto;margin-top:3px;">

ISI KOTAK 3</div></div></div>
<div class="slide"><div class="slide2"><nav1>tajuk 4</nav1>
<div style="height:180px; overflow:auto;margin-top:3px;">

ISI KOTAK 4</div></div></div>
</center>


NOTA KAKI TANGAN :
ABC : Tukar dengan warna yang korang suka
ABC : Tukar dengan korang punya okey.
Pilih warna dekat SINI. Dan edit dekat SINI

*Kalau korang nak buat border curve, tambah code kat bawah ni selepas code .msg_head {
 


-moz-border-radius: 50px;border-radius: 50px; 

3. Save !
P/s : Do follow my twitter --> @AnisSyakira__
Feel free to request tutorials in my ask.fm.

Okay. Syukran. Ma'assalamah wa Ilalliqa' bloggers XD

Assalamualaikum
Blog Author : Fafa Kyraa

You Might Also Like

0 Commentor(s)

Assalamualaikum
Feel free to put your thoughts here XD