Wednesday, March 23

Tutorial Jquery tab menu

dah lama tak update tutorial!..apa tu jquery tab menu tu??jquery tab menu tu macam gambar dibawah nie..saya tak tau cammna nak ulas lebih lanjut..tengok jer pic kt bawah nie..

Photobucket
jquery tab menu nie dapat menjimatkan ruang..tak payah orang nak scroll korang punya blog sampai bawah..
ok jom kita mulakan tutorial!!

1)design>page element>add gadget>html/javascript
2)copy kod dibawah dan pastekan dalam html

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 16px;
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:#FF6699;
margin:1px;
}
.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">

MASUK KOD KORANG

</div>

<h5 class="msg_head">TAJUK 2</h5>
<div class="msg_body">

MASUK KOD KORANG

</div>

<h5 class="msg_head">TAJUK 3</h5>
<div class="msg_body">

MASUK KOD KORANG
</div>
</div>
edited:
*warna oren tu boleh edit ikut warna kegemaran korang
*warna ungu tulisla tajuk menu korang nak letak
*warna pink masukkan kod menu korang contoh:kod formspring,facebook badget,dll

penambahan:kalau korang nak tambah lebih banyak menu juz tambahkan kod nie aje*_^

<h5 class="msg_head">TAJUK 4</h5>
<div class="msg_body">

MASUK KOD KORANG

</div
tutorial nie diajar oleh mari bina blog.blogspot.com

2 comments:

Izzah90 said...

tq 4 tutorial..jadi la sy buat..:)

♥Husna Yunus♥ said...

@Izzah90sama2..senang je kan=)