mas template

Membuat Multi Level Drop Down dengan jQuery

Saya sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang tutorial membuat website kepada anda semua. Nah, kali ini saya akan memberikan satu lagi tutorial blog mengenai cara membuat multi level drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah posting cara membuat menu drop down yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran silahkan lihat gambar di bawah ini atau langsung saja klik disini.


Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya :
  1. Login ke Blogger dengan akun   
  2. Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
  3. Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
  4. Letakkan script JQuery berikut sebelum tag </head>
    <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    Catatan : bagi anda yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah ini abaikan saja
  5. Tambahkan juga script berikut setelah script JQuery yadi
    <link rel="stylesheet" type="text/css"  href="jqueryslidemenu.css" />      <!--[if lte IE 7]>         
    <style type="text/css">         
    html  .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/         
    </style>          
    <![endif]--> 
    <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolis.js"></script>
    
  6. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>
    .jqueryslidemenu{
    font: bold 12px Verdana;
    background: #414141;
    width: 100%;
    }

    .jqueryslidemenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    /*Top level list items*/
    .jqueryslidemenu ul li{
    position: relative;
    display: inline;
    float: left;
    }

    /*Top level menu link items style*/
    .jqueryslidemenu ul li a{
    display: block;
    background: #414141; /*background of tabs (default state)*/
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #778;
    color: #2d2b2b;
    text-decoration: none;
    }

    * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    }

    .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
    color: white;
    }

    .jqueryslidemenu ul li a:hover{
    background: black; /*tab link background during hover state*/
    color: white;
    }

    /*1st sub level menu*/
    .jqueryslidemenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    }

    /*Sub level menu list items (undo style from Top level List Items)*/
    .jqueryslidemenu ul li ul li{
    display: list-item;
    float: none;
    }

    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jqueryslidemenu ul li ul li ul{
    top: 0;
    }

    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }

    .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
    background: #eff9ff;
    color: black;
    }

    /* ######### CSS classes applied to down and right arrow images  ######### */

    .downarrowclass{
    position: absolute;
    top: 12px;
    right: 7px;
    }

    .rightarrowclass{
    position: absolute;
    top: 6px;
    right: 5px;
    }
  7. Setelah itu tambahkan kode HTML berikut diatas <div id='header-wrapper'> (menu drop down diatas header), jika ingin meletakkan di bawah header cari kode penutup header seperti ini       </div><!-- end header-wrapper --> kemudian letakkan dibawahnya :
    <div id="myslidemenu" class="jqueryslidemenu">
    <ul>
    <li><a href="http://creatingwebsite-maskolis.blogspot.com/">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Folder 3.1.1</a>
            <ul>
                <li><a href="#">Sub Item 3.1.1.1</a></li>
                <li><a href="#">Sub Item 3.1.1.2</a></li>
                <li><a href="#">Sub Item 3.1.1.3</a></li>
                <li><a href="#">Sub Item 3.1.1.4</a></li>
                <li><a href="#">Sub Item 3.1.1.5</a></li>
            </ul>
        </li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
      </ul>
    </li>
    <li><a href="http://creatingwebsite-maskolis.blogspot.com/">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>
  8. Terakhir Save Template anda, dan lihat hasilnya.
Silahkan ganti kode yang saya beri warna dengan tulisan anda sendiri, itu dulu tutorial kali ini selamat mencoba dan jangan sungkan jika bingung anda bisa isi kotak komentar di bawah.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

52 comments:

  1. masbro ada yang ama search box g??
    soalna templateku g ada searboxnya....

    ReplyDelete
  2. @Synez:
    Wah.... saya belum ada tuh yang begituan. Gini aja dibikin dua navigas. Syhnez kan udah punya satu tambah lagi dengan multi level drop down.
    Makasih koment-nya

    ReplyDelete
  3. ganti warna tulisannya gimana ya??
    rep to yeah_abcd@ymail.com
    thanks..:)

    ReplyDelete
  4. gan ane nyari kode HTML (tau maksudnyakan) kok ga ada ya, padahal udah make F3 loh?

    ReplyDelete
  5. punya say tidak ada ]]>: trus gmn ?
    apa bisa dilanjutkan bro..?

    ReplyDelete
  6. blogwalking sobat,,, wah kurang begitu memahami bozz, masih amatiran seh he,,he,, salam kenal ya,,,

    ReplyDelete
  7. MAs template saya kok gak ada code ]]>: Bagaimana yah mas padahal mau saya tambahkan sub menu dibawah sub menu. Mohon penjelasan mas. Terimakasih.

    ReplyDelete
  8. @Andi Saputro:
    Maksudnya setelah kode itu diikuti kode skin seperti point nomer 6 diatas.
    Mas Andi tinggal ganti navigasi menu horisontalnya dengan multi level drop down seperti tutorial di atas.
    Kalo masih bingung coba baca tutorial ini aja lebih gampang kayaknya http://www.mybloggertricks.com/2011/11/css3-multi-level-drop-down-menu.html

    Makasih ya

    ReplyDelete
  9. Terimakasih mas tapi backgroundnya jadi tidak penuh satu halaman dan menu berada diatas header.
    Kalau http://www.mybloggertricks.com/2011/11/css3-multi-level-drop-down-menu.html bagus sih tapi warna kurang cocok dan desainnya menggunakan oval ditepi lebih lagi loading website jadi berat banget. Setelah browsing sana sini akhirnya ada solusi juga mas dari web ini http://www.anshuldudeja.com/2009/05/horizontal-multi-level-drop-down-sub.html

    ReplyDelete
  10. langsung dicoba nih, kayanya menarik

    ReplyDelete
  11. template blog saya tidak bisa menggunakan jquery...saya mau pasang menu dropdown saja tidak bisa....tolong solusinya mas....

    ReplyDelete
  12. Thanks mas tutorialnya.. tapi kalau mau pasang posisinya diatas header bagaimana ? mohon pencerahan

    ReplyDelete
  13. @fathur tihman:
    Maaf baru dibales, kalo mau copy kode diatas (nomer 4 dan 5) klik view plan dulu, setelah muncul jendela baru lalu di copy letakkan diatas </head>


    @Rizki:
    Maaf terjadi kesalahan pada langkah nomer 7, sekarang sudah di ralat.
    Untuk meletakkan diatas header ada pada langkah nomer 7

    Makasih udah berkunjung

    ReplyDelete
  14. Nice gan... nih yang ane cari.

    blog yang simple tapi keren. blog walking dulu ah.
    jngan lupa kunjungi blog saya ya gan...

    ReplyDelete
  15. ko di html aku ga ada kode header wrapper sih mas, adanya header inner, terus gimana dong? jadi ditaruh dimana?

    ReplyDelete
  16. Salam!
    Pak boz... ane tertarik belajar bagaimaan membuat kaya punya boz

    ....Selanjutnya tambahkan kode CSS berikut ..

    .....BUKA....

    itu gimana cara membuatnya yah! mohon info

    ReplyDelete
  17. stelah q praktikkan kog menu drop down punya ane ga muncul bro???

    ReplyDelete
  18. sub menu.a koq gag kluar mas ??
    kira" kesalahan.a d'mna ea ?
    mohon bantuan.a ..
    thank's.

    ReplyDelete
  19. Gan ... Siapapun anda, saya sangat berterima kasih... dengan artikel yang anda berikan akhirnya saya bisa mengaplikasikan dropdown menu pada web saya

    ReplyDelete
  20. ... id='header-wrapper'> ataupun end header-wrapper --> di template minima buat praktek saya ko ga ada ya, ada solusi nggak buat nambhin script pada langkah yang ke 7

    ReplyDelete
  21. @Ryan Blogge:
    Kalo di template minima pasti ada lah mas, saya kalo bikin template juga pake minima sebagai dasar

    Cari aja kode header di template

    ReplyDelete
  22. mas jony kenapa yah setiap aq buat sub menu drop down kalau menux terlalu ke bawah selalu tertutup ama si posting itu

    ReplyDelete
  23. @jual produk murah:
    Wah kenapa ya mas, coba dikasih kode z-index:100 pada kode css menu dropdown nya

    ReplyDelete
  24. Halo Admin....
    sayakan pakai template johny dark movie
    saya ingin mrubah nya speri diatas kira" gmana ya cranya...

    mohon bantuannya

    ReplyDelete
  25. kenapa di blog saya gak muncul ya mas?? padahal langkahnya udah bener.

    ReplyDelete
  26. mas ko punya saya submenu 2.1.1 nya udah nongol duluan ya sebelum mouse sya ada di menunya....bingung nech?????????????????????????mohon bantuannnya

    ReplyDelete
  27. mas kolis.. makasih ya.. dah lama aq cari2 artikel ttg menambah menu dropdown pada template yg ga ada menu dropdownnya. Btw, sekarang blogku sudah ada menu dropdownnya tapi kok kepanjangen alias kanan kiri tidak sesuai template. Gimana ya biar kanan kiri rapi sesuai template? Makasih..

    ReplyDelete
  28. Scriptnya yang digoogle code sudah tidak ada.
    Kira2 sama tidak dengan yang dipakai di Johny Si Ganteng?

    ReplyDelete
  29. mantap,lengkap tutornya,terima kasih gan :)

    ReplyDelete
  30. mantab surantab tutorialnya..keren abis

    blog walking .
    http://portalogic.blogspot.com

    ReplyDelete
  31. Kerennn bagus bermanfaat,,
    Bagus untuk pemula seperti saya....


    blog saya gan : http://nadasyahreza.blogspot.com

    ReplyDelete
  32. Jika seperti template yang saya pake ini http://rayshashop.blogspot.com bagaimana pak agar menunya bisa melayang/tetap di atas header/disamping YM.

    ReplyDelete
  33. Wah udah drop down, dipoles pakai multi lagi! Jadi makin cool mas.. :D

    ReplyDelete
  34. numpang lewat sekalian nyoba ya,.. makasih infonya ....bermanfaat sekali

    ReplyDelete
  35. Maksud Sebelum head Apa Itu Mas ?? Saya Tidak Mengerti

    ReplyDelete
  36. This comment has been removed by the author.

    ReplyDelete
  37. mas kalau membuat dropdown kayak IMDb gimana ..

    ReplyDelete
  38. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  39. makasih banyak buat arthikelnay. infonya juga keren ...

    kujungi juga yaa http://toko661.com/, insyaallah bermanfaat..

    ReplyDelete
  40. Sehat itu murah, sehat itu milik kita semua. Bagi sebagian orang sehat itu mahal, memerlukan banyak biaya dan perawatan, tetapi bila anda rajin dan sering menggunakan alat Terapi Ion elektrik rendam kaki, sehat itu murah dan mudah. Oleh karena itu penting bagi anda untuk menjaga kesehatan semenjak dini dengan secara rutin membuang racun dan toksin dari tubuh anda dengan menggunakan alat terapi ion elektrik rendam kaki.
    Terapi Ion
    Terapi Ion Rendam Kaki Air Garam
    Peluang Usaha Rumahan
    Terapi Ion Elektrik Rendam Kaki Detox
    Manfaat Terapi Ion Elektrik
    Terapi Ion Elektrik
    Terapi Kesehatan Murah
    Peluang Usaha Modal Kecil
    Harga Paket Alat Terapi Ion Elektrik
    Pengedar Alat Terapi Ion Di Malaysia

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger