Friday, March 25, 2011

Drop Down Menu


kepada siapa-siapa yang tak tahu mana satu drop down menu ., Niela rupa dia . comel kan ? ><

Ok , jum kita bertutor . Mula-mula korang pergi

Design > Add Gadget > Edit HTML

Copy code nie and paste kat kotak HTML tue ;-

_____________________________________________________

<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>
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>

_____________________________________________________

Nota ;

♥ warna purple tue warna tulisan tab menu
♥ warna oren tue warna background tab menu
♥ warna biru untuk warna background isi tab menu
tajuk 1 , tajuk 2 , tajuk 3 suka hati korang nak letak apa
isi tajuk 1 , 2 , 3 tue isi tajuk korang tue la

credit ; nana

8 kisses me :):

Aja Mazlan (FAZ) said... [♥ Rekiss ♥]

salam..
aja da wat drop down menu ni
da ok tp mslahnya kt blog aja yg about me kt menu uh tlisan dy b'gbung wlupun aja tkn enter
asl ek?? sori kalu byk tny org bru ni

Nas Adila said... [♥ Rekiss ♥]

yeke ? sis tgk ok jea. ader contoh tak ?

diarylifefatihah said... [♥ Rekiss ♥]

kak nas , klu sye buat . sme ker mcm yang kak nas punyer , ker berlainan ,,:) tq

Nas Adila said... [♥ Rekiss ♥]

@diarylifefatihahsame ^^

ezzah said... [♥ Rekiss ♥]

saya dah buat nas . thank you :)

Nas Adila said... [♥ Rekiss ♥]

@Nurulezzah sama2 ^^

Arina said... [♥ Rekiss ♥]

ehh, kalau nak letak gambar camne ek? :o

Nas Adila said... [♥ Rekiss ♥]

@A Freak.letak code gmbr..yg img tu