Wednesday, 8 June 2011

Tutorial Jquery Accordian Tab Menu

Assalamualaikum
Tutorial ini diminta oleh Ina haritu.
Ok.Sebelum Idayu mula bertuto.Kena paham dulu yang Jquery Accordian Tab Menu ni canew.

* kalau tekan je,die boleh jatuh*
Kalau dah faham!Jom start.
Dashboard > Design > Add Gadjet > Html/Javascript

Then,paste cod dekat bawah ni
<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #FF99CC;;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#660033;;
margin:1px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5><div class="msg_body">
<center>
Isi dalam tajuk 1</div>
<h5 class="msg_head">Tajuk 2</h5><div class="msg_body">
Isi dalam tajuk 2
</div>
<h5 class="msg_head">Tajuk 3</h5><div class="msg_body">
Isi dalam tajuk 3</div>
</div>
Note :
Warna merah untuk tulisan dekat tab menu.
Warna pink untuk background tab menu.
Warna hijau untuk background isi tab menu.

Warna biru untuk tajuk.Korang tulis lah tajuk yang korang nak
Warna purple untuk isi setiap tajuk korang lah

Kalau nak ubah code warna tu,boleh tekan di >>sini<<

Lepas tu SAVE.Tapi pastikan jangan tekan rich text.Kalau tak mak oii!Tak jadi.

Ni sebagai tambahan.Kalau korang nak gambar Accordian Tab Menu  tu keluar cepat.Boleh gunakan
Jquery LazyLoad.
Boleh tengok tuto di sini -----> Tutorial Jquery Lazy Load <--------


Thanks For Reading

No comments: