Tutorial: Jquery Accordian Sidebar Tab Menu
Annyeong. Tutorial sekali lagi. Hari ni yad nak show macam mana lha nak buat Jquery Accordian Sidebar Tab Menu ni. Kalau tak tahu Jquery Accordian Sidebar Tab Menu ni ape, ni contoh Jquery Accordian Sidebar Tab Menu tu
Kjum start
1 Dashboard - Design - Add Gadget - HTMLjavascript
2 Pastekan semua code code yang dibawah
<style type="text/css">
h5 {
font-family: Curlz MT;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</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">
Masukkan kod disini.
</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
Code HTML
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Code HTML
</div>
</div>
Merah Tulisan untuk Tittle sidebar tab menu tuh.
Hijau tu size tulisan tittle sidebar tab menu.
Ungu warna untuk tittle sidebar tab menu.
Biru untuk background tittle dia.
Biru cair tu untuk background untuk body dia.
Pink untuk code code HTML korunk tu
Oren untuk tittle sidebar.
Untuk yang nak tukar warna tu sila
Click here
BONUS kalau nak tambah lagi Sidebar Tab Menu tu, kalau tu kan untuk 3 widget je, kalau nak sampai 4, 5 tu, korunk copy code dibawah sebelum </div> tu
</div>
<h5 class="msg_head">Tajuk nombor seterusnya</h5>
<div class="msg_body">
Code HTML
Dan siap lha! :D
Labels: Tutorial
