Saturday, April 23, 2011

tutorial: cara nak buat tab menu drop down (bila diesntuh cursor, tab menu terus jatuh ke bwh)

Tutorial: suka tak ada tab menu yang unik camni?hehe..kalau kurang jelas, sila gerakkan cursor ke sebelah gadget Butterfly kat sebelah kiri ni, kemudian biarkan cursor tu menyentuh menu-menu, jatuh ke bawah tak?jatuh kan?nak buat camtu tak?mehh saya kongsi tutorial cara nak buat tab menu drop down camtu..ada tutorial yg saya jumpa, tak boleh nak letak menu banyak-banyak, kalau letak nanti tak menjadik..tapi saya dah jumpa tutorial yg boleh letak jumlah menu yg kita nak. banyak2 pun takpa hehe credit to blog Suzuran89 !!

1. Login blogspot> Dashboard> Design> Page Element> Add Gadget> HTML/script

2. Tekan Ctrl+C (tekan serentak Ctrl dan huruf 'C' pada keyboard) untuk copy kod di bawah:

    <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:#6A287E;
    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">TITLE 1</h5>
    <div class="msg_body">

    MASUK KOD HTML/SCRIPT
    </div>

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

    MASUK KOD HTML/SCRIPT

    </div>

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

    MASUK KOD HTML/SCRIPT
    </div>
    </div>
 
MASUK KOD HTML/SCRIPT: kod html/script contohnya kod twitter button atau url link website
TITLE 1,2,3: tajuk untuk tab menu
warna hijau: warna untuk font tajuk menu
warna kuning: warna untuk background tempat kod ditampal
warna ungu: warna untuk background tajuk menu
untuk dapatkan kod warna yg lain, klik SINI.

3. kemudian, paste kan kod di atas tadi di gadget HTML/script dan save !!

4. kalau nak tab menu lebih dari tiga, boleh tambah kod di bawah selepas tab menu ketiga:

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

MASUK KOD HTML/SCRIPT

</div>

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

MASUK KOD HTML/SCRIPT

</div>
SELAMAT MENCUBA yeahhh :)
saya belajar tutorial ni dari SINI.

Anda sedang membaca artikel tutorial: cara nak buat tab menu drop down (bila diesntuh cursor, tab menu terus jatuh ke bwh) dan link url bagi artikel ini adalah http://suterakasihyann.blogspot.com/2011/04/tutorial-cara-nak-buat-tab-menu-drop.html
Semoga artikel tutorial: cara nak buat tab menu drop down (bila diesntuh cursor, tab menu terus jatuh ke bwh) ini dapat memberi manfaat untuk semua.

13 COMMENTS:

HonEyBuNNy said...

banyaknya coding....hehe...orang malas cm ila bila tengok dah fening2...ingat nak tukar layout,tp malas gila...biarkn klasik cm tu je..ihih

atiey azha said...

mak aih . panjangnye tajuk dear .. hehee ..

[sutera kasih] said...

@honeybunny: hehe tak byk tu..mungkin sbb saiz font tu bsr sgt..tu lah nmpk pjg hehe..layout ila yg skrg ni pun ok dah, nice bah soft brown :)

[sutera kasih] said...

@atiey: takut org tak fhm hihihi

Redbloodsnow said...

eee menarik tok yang, ada masa lak...kelak kak zie try polah ^_-

[sutera kasih] said...

@sis zie: hehe kelak ktk try k..menjimatkan space :)

Cik Khairyyna :) said...

tq. dh lama carik tutorial neyh. :)

[sutera kasih] said...

@Cik Khairyyna :): selamat mencuba, saya pun blaja tuto dr blog lain, so sy share :)

budak kechik sengal said...

aduhh ! panjang sangat ! saked mate ! pening kepale , , susah lah nak buat . . :(

[sutera kasih] said...

@budak kechik sengal: sakit mata ekk dekk..ciannya, adik try klik SINI kt atas tu, maybe tuto dia, adik sng nk fhm :)

adeek said...

ala nak cube tapi x geti main gan kod2 nie la...

nur shahrina said...

x jadi lah ..saya dah masuk kan kod tapi ... x jadi ??? macam mane eh ??

.:: Schaz ::. said...

xjdik la. sbb benda tu statik je. ble sentuh x naek atau turun.