Tutorial Accordion Tab Menu

Hola semua
Hari ni atas permintaan
Saya nak buat 
Tutorial Accordion Tab Menu

Contoh :
  Menu yang tersusun menegak


Bila cursor ke menu, isi kandungan akan slide keluar

Caranya :

Dashboard --> Layout -->Add a gadget --> HTML/Javascript

copy code ni

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
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:#77c143;
margin:1px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background:url(http://i1240.photobucket.com/albums/gg487/dikbi/light_brown_canvas-seamless_web_texture_zps3599d9bb.jpg);
}
</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">
Isi code 1
</div>

<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
 Isi code 2
 </div>

<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Isi code 3
</div>


Tulisan merah - warna tulisan dan background untuk menu
Tulisan oren  - url background untuk isi kandungan
Tulisan pink  - Tajuk menu ikut selera nak letak apa pun
Tulisan Biru  - Code widget yang nak letak.


Peringatan : jangan sesekali prebiu dengan menekan rich text...nanti x jadi



p/s: kalau ada masalah bagitau ye


Post a Comment

13 Comments

  1. Saya dah sampai!!! Hai bee! Hurm...kejap...kena pahamkan betul2 ni. Takut silap buat.

    ReplyDelete
  2. @Crack ui...cepat sampai...tak kuar ke weekend??

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. jatuh cinta dgn design blog ni... buat sendiri ke? anyway nice tuto... bila dah berdomain nnt harap blog ni makin maju... dikbee dot com dah beli tunggu nak set je lagi

    ReplyDelete
  5. @potia casadelarossa Menunggu dengan sabar ni...yehuhuuuu

    ReplyDelete
  6. @D i n wah...ape yg best tu??? hihi

    ReplyDelete
  7. ok sy bookmarked dulu tutorial ni...nanti nak pasang kat blog boleh refer balik....

    ReplyDelete
  8. klu guna accordian ni utk google friend connect dgn google+ jadi tak? sbb ak ada accordian sendiri tp bila smpai kt part gfc dgn g+, dia tak jadi

    ReplyDelete
  9. oh okay. bru perasan. kne letakkan kod widget tu kat tajuk 1,2,3...

    ReplyDelete
  10. @kopi pasta rasanya tak boleh kot sbb takde kod. tp kalau ada, boleh jer...

    ReplyDelete
  11. cantik dan canggih dikbi...ayie tgh fikir nk pakai ke tak...:D

    ReplyDelete