Tutorial 78 : Drop-Down Tab Menu

Assalamualaikum..
Thank kepada semua yang suka kat tutorial kita.
Ok, kali ni aku nak ajar cara-cara untuk buat drop-down tab menu dalam blog. Macam gambar di bawah :

 

Drop-Down menu ni memudahkan reader korang untuk tahu isi kandungan dalam blog korang. Hanya click-click jer dah boleh open. Sebelum try, better korang download full template terlebih dahulu sbg back-up kang jahanam blog korang kang.
Jom try buat!
1. Sign in blogger > Design > Edit HTML
2. Cari code ini, nak mudah tekan Ctrl F, masukkan code dalam kotak find dan enter!

]]></b:skin>
3. Dah jumpa? copy code dibawah dan paste sebelum/di atas code yang dicari tadi.



        #jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}


       


4. Dah selesai cara di atas, cari code ini pula, nak mudah tekan Ctrl F, masukkan code dalam kotak find dan enter!

</head>

5. Lepas itu, copy code di bawah dan paste sebelum/di atas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[

var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;

function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}

$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
  //]]>
  </script>
6. Dan bolehlah SAVE.


 
Opppss jangan lari, belum habis lagi ni. Step di atas adalah cara settingnya. So Tab menu kena ikut cara ini pulak.

1. Sign in Blogger > Design > Add Gadget > Html / JavaScript
2. Sila copy dan paste ke dalam ruangan HTML/ Java Script

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Menu 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>

 <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
  <li><a href="#">Menu 6</a></li>
  </li></ul>
3. Korang cuma tukar :
#          Link menu korang
Menu  Tajuk utama
Drop   Sub Tajuk/ drop menu
4. Dah tukar semua. SAVE.

p/s : Nanti komenlah bila dah cuba k. :)

25 comments

  1. terima kasih bg tutorial nie..dah jadi..lame dah sis cari tutorial nie taw..suka :D

    ReplyDelete
  2. nak tanye, cemane kalo nak cnter kan tab menu nie kat blog..dah try, tp xleh pon...

    ReplyDelete
  3. yang '#' untuk link yang mana ek? tak berapa nak faham lah yang tu. sorry tanya.

    ReplyDelete
  4. akak,boleh tak akak buat tutorial tab menu menggunakan code html
    contohnye tak perlu pergi ke page elements untuk paste code cuma paste code kat html
    boleh ke ?sorry la akak
    dah lama cari tapi tak jumpa
    harap akak boleh tolong

    ReplyDelete
  5. Assalamualaikum cik nurfarah..... nape yang saya buat tak jadi..... erm cik nurfarah bleh tolong ker..... ???? aku tak tahu apa masalah nya tu dah sehari ku cuba buat tapi tak jadi.... cuba cik nurfarah lihat kat blog saya... tu ...ney dia...http://lineclearbah.blogspot.com

    ReplyDelete
  6. saya sudah buat menu bar itu... tapi itu sub menu 1 tak boleh show semua... bagaimana solve masalah ini?? tq...

    ReplyDelete
  7. sub menu tak boleh show semua. Bolehkan lihat blog saya... pls...
    http://kckok92.blogspot.com/
    tq very musch

    ReplyDelete
  8. athirah. yg # tu utk link entry yg awak nak masukkan dlm dropdown

    ReplyDelete
  9. saya dah try buat, jadi tetapi macamana nak post dlm sub, sbb bila clik kat sub nothing happen.

    ReplyDelete
  10. salam cik Nurfarah, yg tadi tu dah ok, sekarang problemnya sub nya (drop 1 or 2) tertutup oleh main post. mcmana nak buat page menu itu ke hadapan.

    ReplyDelete
  11. terima kasih :D dah lama carik tutorial ni :B hehehe

    ReplyDelete
  12. ]]>

    nape kod ni xde dlm edit html sy yer...huhu..ada cara lain x nk tambah dropdown menu..?

    ReplyDelete
  13. Salam dear,

    nak tanya boleh tak kalau nak buat dropdown menu yg dua kali? mcm mane coding die ye?

    cthnye..

    Menu
    Drop down 1.1
    Drop down 1.1.1
    Drop down 1.2
    Drop down 1.2.1

    boleh tak? ajar pls.

    tq

    ReplyDelete
  14. Dah jadi but bila click tak keluar ape ape pon cam mane tu?

    ReplyDelete
  15. salam.. xjadi la.. coding to appear kat atas blog je, xde pon dropdown menu tu..

    ReplyDelete
  16. Thanx for the tutorial. Nak tanya, saya buat tapi submenu tak keluar habis. Keluar separuh je. Contohnya, Drop 1-1 keluar separuh, Drop 1-2 tak keluar langsung. Tapi bila klik pada Drop 1-1, link dia ok je. Kenapa ya?

    ReplyDelete
  17. Sempena bulan Promosi GLA Complex Shaklee, sedikit info untuk berkongsi dengan anda.

    Pentingnya asid gamma-linolenik(GLA) untuk cantik dan langsing.GLA di kedai-kedai farmasi kebanyakkannya dijual dari sumber evening primrose oil (EPO). EPO mmg sinonim dengan wanita.

    Soalan lazim: Apa beza GLA Dan EPO?Shaklee takde jual EPO?

    Jawapan simple: EPO kaya dengan GLA. Borage juga kaya dgn GLA. Kebanyakkan GLA yang sedia ada di pasaran dihasilkan daripada EPO. tetapi RAMAI YANG TAK TAHU kepekatan GLA berbeza dalam kedua2nya. BORAGE mengandungi GLA dua kali ganda yang lebih tinggi dari EPO. Dari segi bioavailabiliti (kadar penyerapan) BORAGE juga adalah 3 kali lebih berkesan daripada EPO.

    Soalan yang patut anda tanya adalah: Patut beli EPO atau GLA Complex Shaklee?
    Anda buat keputusan sendiri. Apa yang saya boleh beritahu adalah GLA COMPLEX Shaklee menggunakan bunga borage sebagai bahan utamanya.

    Lagi soalan HOT:Kenapa produk shaklee disebut GLA COMPLEX?Kenapa tak disebut minyak borage je?
    Kerana kandungannya memang COMPLEX.bukan sekadar borage. GLA Complex Shaklee mengandungi asid gamma linolenik (GLA) dari minyak borage, asid linolenik (LA), minyak bunga matahari dan vitamin E. Bioavailabitinya dibuktikan secara klinikal di mana ia mampu menyerap ke dalam sel dan tisu dengan lebih baik

    Sekarang anda boleh jawab samaada nak EPO atau GLA Complex.
    Anda nilaikanlah sendiri. Jadilah pengguna yang bijak.Jangan pening2.

    notakaki: GLA Complex bukan sahaja untuk wanita. Ia juga penting untuk kanak-kanak, remaja dan juga orang dewasa lelaki dan wanita.

    Apakah kelebihan dan khasiat Shaklee GLA Complex ni?*

    √ Membantu mengawal dan mengatur kitaran haid
    √ Membantu meningkatkan kesuburan - for those trying to conceive baby!
    √ Melegakan PMS (sindrom pra-haid) - abdominal pain, breast pain
    √ Membantu dalam menangani menopos
    √ Menguatkan kuku dan rambut
    √ Menjadikan kulit lebih sihat dan berseri-seri
    √ Membantu menangani ekzema
    √ Melegakan simptom akibat artritis reumatoid
    √ Mengandungi vitamin E untuk menguatkan dinding arteri
    √ Menguatkan imuniti tubuh
    √ Memperlahankan proses penuaan
    √ Mengurangkan blood-clot yang boleh menyebabkan serangan jantung
    √ Mengawal kencing manis dan darah tinggi
    √ Mengawal kolesterol
    √ Untuk fungsi saraf

    *Tiada perisa, pemanis, pewarna atau bahan pengawet tambahan.

    ReplyDelete
  18. Thanks awak. Dah jadi .. Tapi macamana nak centrekan dia?

    ReplyDelete
  19. Macam mana nak letak content dalam menu tu eh ?

    ReplyDelete
  20. tq sis... sy dh cuba.. senang untuk newbie.. halal kan ye... :)

    ReplyDelete
  21. Salam, t.kasih dik share tutor ni. senang sangat akak nak follow :)

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Related Posts

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH