Cara Buat Tab Menu Drop Down atau JQuery Tab Menu Accordian | Miss Durian Runtuh

Jan 2, 2011

Cara Buat Tab Menu Drop Down atau JQuery Tab Menu Accordian

Salam. Harini nak ajar macam mana nak buat tab menu drop down, atau nama komputer nya Jquery tab menu accordian. Okey, segala kod-kod ini aku refer kepada blog MariBinaBlog. Kalau korang rajin explore tutorial Jquery dalam blog ni, memang korang leh dapat segala macam jenis tab menu yang lawa-lawa. Macam professional je blog korang dan tak sarat dengan segala mcam widget. Amboi, macam la blog kau professional sangat. Tab menu ni aku pasang kat bahagian Nokia C3-00 kat side bar aku tepi nih. Okey, jom belajar.
1. Bukak Dashboard --> Design --> Page Elements --> Add a Gadget --> Pilih HTML/ Java Scripts.
2. Tanpa ragu, korang copy segala macam kod di bawah ni di dalam HTML/Java Scripts tadi.
<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:#FF6699;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.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>
3. Masukkan kod Popular Posts, Recent Comment,Recent Post,Shout box, Formspring box dan macam-macam di bahagian MASUK KOD KORANG. Tajuk boleh letak di TAJUK 1, 2 dan 3.
4. Untuk kod warna #ffffff adalah warna bagi tajuk,
#FF6699 adalah warna background title box yang macam aku punya kat Nokia C3-00 tu,
#FFFFFF adalah background accordian box iaitu background tempat shoutbox dan lain-lain tu.
Korang boleh pilih warna kat SINI.
5. Save. Dah siap.
6. Opss, kalau korang nak banyak atau sikit tab menu tu, just copy je ,
<h5 class="msg_head">TAJUK 4</h5>
<div class="msg_body">

MASUK KOD KORANG

</div>
di bawah-bawah nya, atau cut sahaja mengikut kehendak hati korang.

Kalau nak lebih faham, boleh tengok blog MariBinaBlog. Credit to Lionteen for new url code.
signature






33 Flowers:

Fittrie Husni said... Reply Comment

weh nanti bentuk dia jadi cane?aku xtau r..

Fittrie Husni said... Reply Comment

yang kat bawah tudung bawal 2 ek?

Anis said... Reply Comment

yes da ade tutorial :D
toce sifu! nk try nti :D

Unknown said... Reply Comment

wah~ *tepok tepok*
ak ngt kan tadi drop down menu utk buat sistem. siap bole buat tutorial kat blog. haha. wa salute sama lu babe. :))

♛ Kerani Sekolah ♛ said... Reply Comment

@hajar_razak

java jsp aku tak mahir la..haha

Cik Ina Do Do Cheng said... Reply Comment

selamat tahun baru 2011 akak ucapkan, semoga tahaun 2011 nazirah success ngan pelajaran dan kehidupan.

teruskan memberi tutorial.

♛ Kerani Sekolah ♛ said... Reply Comment

@Cik Ina minat Do do Cheng

time kasih kak ina :)
saya pon harap family kak ina lebih happy tahun nih :)

syafiq.net said... Reply Comment

wow berjinak dengan jquery :D
jquery ni satu js lib yang memang hebat gila weh :D

kalau ko belajar betul2 memang banyak benda boleh buat.

p.s pita ko masukla sikit2 jquery. kompem menarik. eye candy. panel suka tengok benda2 eye candy neh :D

rgds,
syafiq.net

♛ Kerani Sekolah ♛ said... Reply Comment

@syafiq.net


ye ke senior kuh..okey2, nanti leh explore lagi.. :)) time kasih bgi tips

Alya Twink♥ said... Reply Comment

Akk , nak tanye .
Macam mane akk masukkan 'owner' tuhh ?
Ade gambar lagi ?
Tolong ajar boleh ?

♛ Kerani Sekolah ♛ said... Reply Comment

@Alya Twink♥
letak kat bahagian TAJUK 1, TAJUK 2, TAJUK 3 :)

MamaLieza said... Reply Comment

Salam dik
Nape akak buat xbley slide ye?dia x ngincup..ngembang je.. H.E.L.P!

Anonymous said... Reply Comment

KAKAKAKAK !!! PLEASE REPALY APE YG SYE NAK TNYE NI ! MACAM MANE NAK LETAK BACKGROUND DKT TAB TUUU ????

♛ Kerani Sekolah ♛ said... Reply Comment

@Miss Momo

bckground ape dik??ce bgi soalan yg lebih detail..bground warna ke?
kalo warna letak kat sini

.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FF6699;
border: 2px solid #FFFFFF;
margin:1px;
}

tukar kod warna yg #FF6699 tu

♛ Kerani Sekolah ♛ said... Reply Comment

@MamaLieza

waalaikumsalam kak :)
emm, saya pon selalu jadi mcm tu kak..tpi sebabkan tenet tu lembap dan lmbat loading.tu die tak kembang kuncup..tpi sebenarnye kod die memg dah betul dah dan memg akan jadi..ce akak buat, dan suruh sesapa bukak blog akak.org tu boleh tak nmpak efek die. :)

[sutera kasih] said... Reply Comment

thanks sbb share tuto ni..cari punya carikk, jumpa jgk kt sini, tuto ni best sbb boleh buat lebih dr tiga tab hehe..nk share ngn kwn2 lah..credit to you :)

nurradizan said... Reply Comment

akak , macam mane nak masukkan owner erh ? macam mane nak masukkan gambar kat kod tu ? please help me . saya blogger baru .

♛ Kerani Sekolah ♛ said... Reply Comment

@SHAHIRAH ADIZAN

http://suzuran89.blogspot.com/2011/01/cara-mudah-letak-iklankempen-churp.html

adik, tuk letak gmbar guna kod ini..upload dulu gambar tu, then copy die nye URL.

Farah chomot said... Reply Comment

akak , masukkn kod tu kn , kod apa ? tk phm ?? tlg reply kt blog syyyyy :(

Dinkyrara :) said... Reply Comment

wahh,dah jadi,!
cume takleh nak turunkan2 menu bar,sentiasa jer terbuka :)
btw,thankz akak :)

Anonymous said... Reply Comment

cam ne nk dptkn code ue??

Nurfarisha Amira said... Reply Comment

JADI !
thanks for the awesome tutorial :)

♛ Kerani Sekolah ♛ said... Reply Comment

@Anonymous

kod tu contoh kod untuk recent komen,kot untuk shoutbox/cbox,kod untuk letak gmbar.boleh google okey

♛ Kerani Sekolah ♛ said... Reply Comment

@Iera Lollies

saya dah tukar kod die..dah pulih semula..SORRY! :)

nur shahrina said... Reply Comment

asalamualaikum ..akak x jadi lah .. saya dah letak kat MASUKKAN KOD 2 kod saya lepas 2 bila perview keluar kod tersebut ... macam mane nie (◕^^◕)

ZieShop said... Reply Comment

Dear cam mana nak masukkan isi kandungan dalam setiap tab yg kita buat..tab ada buat dalam tu xde apa2

♛ Kerani Sekolah ♛ said... Reply Comment

@ZieShop

masuk isi kndungan dalam bahagian MASUK KOD KORANG..

♛ Kerani Sekolah ♛ said... Reply Comment

@nur shahrina
maybe kod tu yg salah..kalo kod betul dia akan generate jdi apa yg septutnya