i am a cute bear
biography stuffies chingu(s) home entry

  


Older Post >> | << Newer Post
TUTORIAL ACCORDING TAB MENU
TUTORIAL ACCORDING TAB MENU


ok harini aina nak ajar korg buat according tab menu mcm kat bwh ni.. benda tuh jatuh bila cursor korg menyentuh...






















 1.Dashboard > Design > Add Gadget > HTML
2.korg copy code kat bawah ni di ruangan HTML tuh

<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:#FFB6D6;
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>
Masukkan Kod text di sini</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
Masukkan Kod Text Di Sini</div>
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Masukkan Kod Text Di Sini</div>   
</div>
Merah : Untuk tulisan Tab Menu
Biru : Untuk Background Tab Menu
Kuning : Untuk Background Isi Tab Menu
Hijau : Tajuk Tab
Ungu : Masukkan kod/text disini > Code HTML yang korang nak letak kat dalam tajuk tadi tu


3.Save dan lihat hasilnya



SELAMAT MENCUBA


KALAU NAK COPY TICK CTRL+C DENGAN SERENTAK

Labels:



0 Comments:

Post a Comment