Senin, 14 Mei 2012

Cara Membuat Menu Horizontal Drop Down Dengan Animasi


By on 17.58

Cara Membuat Menu Drop Down Dengan Animasi - Apakah kamu mau mempunyai Menu Drop Down yang cantik, jika mau, saya akan memberitahu anda bagaimana Cara Membuat Menu Horizontal Drop Down Dengan Animasi, dengan bantuan CSS dan jQuery kita bisa membuat menu drop down ini dengan animasi, tapi untuk membuka menu drop down nya klik tanda panah yang ada disebelah kata TOP, Atau Lifestyle maka menu nya akan langsung terbuka. Baiklah langsung saja cara membuat nya.



LIHAT DEMO

1. Login ke Blog kamu.
2. Pilih Rancangan > Pilih EDIT HTML.
3. Cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat di atas kode ]]></b:skin>
#menu {
background:url(https://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/s1600/menu_bg.gif);
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:980px;
padding:0;
}
#menu li {
background:url(https://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/s1600/menu_bg.gif);
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}
#menu li a{
color:#bfbfbf;
text-decoration:none;
padding-left:15px;
padding-right:10px;
background:url(https://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/s1600/menu_bg.gif);
display:block;
float:left;
}
#menu li span{
background:url(https://lh6.googleusercontent.com/-z4RWmllD834/TwRCBkfDDxI/AAAAAAAAUV4/x7Zb2x3khas/s1600/arrow.png) no-repeat 0 12px ;
width:20px;
height:35px;
/*display:inline-block;*/
float:left;
/*top:-35px;*/
/*position:relative;*/
cursor:pointer;
}
#menu li ul{
background:url(https://lh6.googleusercontent.com/-YlKLpa3YYjQ/TwRCGYl8QYI/AAAAAAAAUWk/BXxZS25kbqs/s1600/submenu_bg.gif) no-repeat right bottom;
padding:0;
font-size:15px;
display:none;
width:250px;
z-index:5;
position:absolute;
margin:0;
float:left;
left:0;
top:36px;
}
#menu li ul li{
background:none;
width:250px;
overflow:hidden;
line-height:25px;
}
#menu li ul a{
background-image:none;
border-bottom:1px solid #171717;
border-top:1px solid #545454;
border-left:1px solid #171717;
width:237px;
}
#menu li:hover ul{
}
a:active, a:visited {
outline:none;
}
.overRed {
background:url(https://lh6.googleusercontent.com/-0ZqyXhOjKwU/TwRCEUrEpUI/AAAAAAAAUWg/4Su-OLYXnQI/s1600/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;
}
Jika lebar nya tidak sesuai dengan Blog anda, anda boleh ubah kode yang berwarna biru dari 980px menjadi 1000px atau jika terlalu besar anda boleh memperkecil lebar nya. Terserah anda saja.

4. Selanjutnya Cari kode </head> setelah ketemu letakan kode dibawah ini tepat di atas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul#menu li a, ul#menu li span").click(function(){
$(this).parent().find("ul.submenu").animate({height: 'show', opacity: 'show'}, 'slow');
})
$("ul#menu li").not("ul#menu li ul li").hover(function(){
}, function(){
$(".submenu").animate({height: 'hide', opacity: 'hide'}, 'slow');
})
$(".submenu li a").hover(function(){
$(this).animate({paddingLeft: "30px"}, 'fast') ;
$(this).addClass("overRed") ;
},
function(){
$(this).animate({paddingLeft: "15px"}, 'fast') ;
$(this).removeClass("overRed") ;
}
)
})
</script>
5. Simpan Template nya.
6. Cari kode yang mirip dengan dibawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Demo Blazer Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
Kode datas merepukan kode bagian Header, takut setiap blog berbeda, coba cari saja yang ada kata (Header) setelah ketemu letakan kode di bawah ini tepat di bawah kode diatas yang nomor 6. Intinya cari kode bagian header anda supaya lebih mudah, apa nama judul blog anda yang di header misal judul nya Demo Blazer Blog, Cari saja kata Demo Blazer Blog.
<ul id='menu'>
<li><a href='alamat blog kamu'>Home</a></li>
<li><a href='#'>Top</a>
<ul class='submenu'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Development</a></li>
<li><a href='#'>Freebies</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Tutorials</a></li>
<li><a href='#'>Wordpress</a></li>
</ul>
</li>
<li><a href='#'>Lifestyle</a>
<ul class='submenu'>
<li><a href='#'>Food</a></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Travelling</a></li>
</ul>
</li>
<li><a href='#'>Entertainment</a>
<ul class='submenu'>
<li><a href='#'>Celebs</a></li>
<li><a href='#'>Music</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>News</a>
<ul class='submenu'>
<li><a href='#'>Nasional</a></li>
<li><a href='#'>Internasional</a></li>
<li><a href='#'>Indonesiaku</a></li>
</ul>
</li>
<li><a href='#'>Sports</a>
<ul class='submenu'>
<li><a href='#'>Sepakbola</a></li>
<li><a href='#'>Basket</a></li>
<li><a href='#'>MotoGP</a></li>
</ul>
</li>
<li><a href='#'>Download</a>
<ul class='submenu'>
<li><a href='#'>Mp3</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>Technology</a>
<ul class='submenu'>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Computer</a></li>
<li><a href='#'>Handphone</a></li>
</ul>
</li>
<li><a href='#'>Blogger</a>
<ul class='submenu'>
<li><a href='#'>Tips Blog</a></li>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>jQuery</a></li>
</ul>
</li>
</ul>
Sehingga susunan nya kayak gambar dibawah ini.

Ganti kata-kata yang dicetak tebal dengan kata-kata lainnya.
Ganti tanda # dengan URL yang dituju.
Simpan dan lihat hasilnya.

Perhatian :
"Kenapa supaya mudah ga dipilih Add Gadget HTML Java Script, entah kenapa nantinya ga bisa di buka Submenu nya, jadi supaya bisa di buka letakan saja secara langsung di menu EDIT HTML di bagian bawah kode bagian HEADER BLOG anda"

Jika anda menemukan masalah alangkah baiknya meninggalkan pesan di kotak komentar, dan kami pasti akan menjawab nya.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

73 komentar:

  1. blazerracing MEMANG LUAR bIAAAASAAA.

    Trus apa bedanya Menu Horizonal ini dengan yang ada di postingan ini

    http://blazerracing.blogspot.com/2012/03/cara-membuat-menu-horizontal-drop-down.html

    BalasHapus
  2. Bedanya sangat banyak mulai dari warna,style,dan kalau yang diposting ini ada animasi nya jadi harus di klik tanda panah nya untuk membuka Drop Down Menu nya dan saat itu sobat akan melihat sedikit animasi.

    BalasHapus
  3. udah d coba koq sub menu nya gak pada kluar mas??

    BalasHapus
  4. Nah itu gan untuk membuka sub menu nya osbat haru klik tanda panah yang ada pada menu horizontal nya. Baru terbuka

    BalasHapus
  5. tanda # pagarnya diganti dengan apa fren, ana orang awan dalam masalah ini, tolong dijelaskan dengan sejlas-jelasnya, jazakallahu khairan atas artikelnya semoga diberi ganjaran yang setimpal, aamiin.

    BalasHapus
  6. Ganti tanda # dengan URL yang di tuju misal dengan ini
    http://blazerracing.blogspot.com/2012/05/cara-membuat-menu-horizontal-drop-down_14.html

    BalasHapus
  7. gan pake expand widget ga?

    BalasHapus
  8. banyak maaf kawan, saya benar-benar ngk ngerti, tapi saya ingin belajar, mana menunya disebelah kanan tu ada ruang kosongnya panjang lagi kwan, harap maklum aja kawa.
    saya benar-benar awam dalam masalah ini, sampai sekarang saya masih mencari cara untuk mengaktifkan sub menu dan memotong bagian yang kosong dibelakang menu.

    saya sangat berharap fajar bisa membantu saya, karena saya tertarik dengan menu yang ditawarkan oleh fajar karena sesui dengan latar yang saya gunakan, kalo berkenan fajar boleh ngk liat blog saya, agar nanti mungkin bisa memberikan masukan pada saya, terima kasih atas waktunya.

    BalasHapus
  9. Kan ada tanda panah pada menu horizontal nya nah sobat klik tanda panah nya maka akan terbuka submenu nya.

    BalasHapus
  10. Ga perlu di centang expand widget template nya gan

    BalasHapus
  11. tetap tidak mau kawan, mungkin karena saya yang ngk paham kali kawan, padahal menu itu cocok benar dengan blog saya, tinggak ganti nama-nama menunya aja.

    BalasHapus
  12. klo d blog sub menu nya cman kluar satu gk smua, tapi klo cobain pke dreamweaver sub menu nya kluar smua.
    knpa tuh mas??

    BalasHapus
  13. Maaf Gan ternyata ada kesalahan dalam penempatan HTML Code nya buka di Add Gadget HTML Java Script, tunggu saya perbaiki dulu.

    BalasHapus
  14. Gimana gan udah pada berhasil??

    BalasHapus
  15. wah tq gan,,, aq dah berhasil
    neh liatin yo gmn gan?
    http://fazansyl.blogspot.com

    BalasHapus
  16. gan warna hitam pada kotaknya bisa diganti warna lain?
    terus ko menunya di atas judul blog bukan dibawah?

    BalasHapus
  17. Untuk ganti background nya silahkan ganti kode
    background:url(https://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/s1600/menu_bg.gif); menjadi
    background:#kode warna
    Dan kalau mau meletakannya di atas judul Blog letakan kode nya di atas kode yang nomor 6 tepat nya di atas div id='header-wrapper

    BalasHapus
  18. gan ko aku sulit cari tempat untuk naruh kode yang ke 6, kalo di taruh di bawah yang ada nama blog, ko sub menunya tidak keluar?

    BalasHapus
  19. Itu harus benar-benar teliti, anda harus benar-benar tahu kode bagian awal Header dan akhir header blog anda (berbeda-beda setiap blog), dan letakan kode nomor 6 yang kedua tepat di akhir kode bagian header

    BalasHapus
  20. Maaf yah Bro , kanapa di blog saya Menu nya Rata kiri , kok tidak pas ke tangah ?

    Tolong penjelasannya Bro , trima kasih .

    BalasHapus
  21. Itu karena lebar nya, coba ubah kode width yang berwarna biru sesuaikan dengan lebar blog anda, atau ubah kode 980px menjadi 100%

    BalasHapus
  22. kak..
    menu sub nya muncul..
    tpi kok di klik salah satu menunya kagak bisa..
    panah nya pun juga g bisa..

    BalasHapus
  23. Coba cek lagi, soalnya sesuai percobaan itu berhasil 100%

    BalasHapus
  24. thanks gan.
    mampir ya gan.
    http://kellisoft.blogspot.com

    BalasHapus
  25. gimana ini, udah coba berkali2 tapi gagal terus. sub menu yg di klik gak mau muncul :(

    BalasHapus
  26. Gimana yah? saya coba sih berhasil, dan beberapa orang juga berhasil. Gini aja, coba Anda kirimkan email anda nanti saya akan kirimkan script singkat yang semoga berhasil.

    BalasHapus
  27. ini emailnya
    hzya_minoz@yahoo.com
    tolong yaaah ....

    BalasHapus
  28. sy juga gan ,.
    sub menunya gak mau keluar nih,..
    kirimin sy yang simple jha ,.

    ermans_z@yahoo.co.id
    nih emailnya gan ,.

    thanks sblumnya,._.

    BalasHapus
  29. Ok semuanya telah sukses saya kirimkan. Semoga berhasil, jika berhasil beritahu saya.

    BalasHapus
  30. gan, kalo mau ganti warnanya gimana ya?
    biar jadi satu warna sama blog saya
    plus ganti ukurannya tapi bukan yg width:980px itu
    mau bener bener di full custom lagi sama ane?
    ada softwarenya ga gan?

    BalasHapus
  31. ganti saja width:100% untuk warna silahkan ganti kata background:url(URL Gambar); menjadi background:#kodewarna;

    BalasHapus
  32. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  33. bisa gak nih kalo sekalian konsultasi ? tapi, lewat email ajah yah biar leluasa. thank you

    BalasHapus
  34. kok ada garis putus putus gitu ya gan?
    cek disini gan gladiatorbola.blogspot.com

    BalasHapus
  35. Hmm kayaknya saya ga bisa ilangin tuh garis pinggirnya, tapi blog anda kayaknya sudah berhasil nih pasang menu drop down nya.

    BalasHapus
  36. pasangnya sudah berhasil gan haha
    fontnya bisa dikecilin ga gan?

    BalasHapus
  37. waahh Nice info... :)
    Makasih ya informasi'y

    jangan lupa mampir kesini ya..
    http://quantamultimedia.com/


    terimakasih ^_^

    BalasHapus
  38. terima kasih banyak admin.. :D
    Good Job..
    admin penggemar Naruto ya? :D

    BalasHapus
  39. sukses sobat, thanks ea atas tutorialnya...

    BalasHapus
  40. bang yang no 6 gagal terus,,
    salah yang mana nya sih,,??

    mohon bantuannya,, :)

    BalasHapus
  41. kan kode nomor 6 beda-beda gan setiap blog nya, jadi untuk lebih mudah mencarinya, silahkan tekan CTRL+F, cari apa judul Blog Anda yang Ada di header, misal Blazer Blog coba cari kata Blazer Blog, nanti pasti ada kata-kata header nah itu gan

    BalasHapus
  42. mantp info terbaru nya masbro,!
    coba dulu sob,,,,
    mampir ya di mari :
    Tips KOmputer. Download lagu. Info Terbaru. thanks!

    BalasHapus
  43. Terima kasih saudara atas postingannya, walau blm saya pergunakan, paling tidak kita sdh bisa berkenalan, kunjungi blog saya dan kasih masukan ya, bgmn yg terbaik supaya pengunjungnya meningkat, mksh sobat

    BalasHapus
  44. thanks gan jangan lupa kunjungi blog saya

    BalasHapus
  45. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  46. bos cara mengaktifkan menu horizontal dropdownnya gimana ya? setelah saya buat entry baru dan entry baru tersebut mau saya masukan ke sub menunya gimana ya caranya? mohon bantuannya.

    BalasHapus
  47. salam,saya sudah berhasil,cuma ketika memasukkan tulisan baru sesuai lebel ke sub menu tulisan itu tidak muncul ketika di klik,minta solusinya bro

    BalasHapus
  48. Gan klo bikin menu horizontal kayak punya agan yg selalu nempel terus diatas ketika cursor mouse digerakkan kebawah itu gimana ya cara membuatnya,,,tlg bantuannya dung.ditunggu ya jawabannya...salam persahabatan n salam kenal dari saya.

    BalasHapus
  49. Maaf yah gan, saya ga bisa kasih tahu karena ini rahasia template Blazer Blog agar tampil beda dengan situs/web lainnya.

    BalasHapus
  50. Makasih Gan bagi ngilmunya.
    Salam Blogger

    BalasHapus
  51. Gan file hosting yg dari link ini dimana buatnya yah?
    https://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/s1600/menu_bg.gif

    Thanks

    BalasHapus
  52. Saya disini gan picasaweb.google.com

    BalasHapus
  53. Saya sudah bikin tapi ketika menunya di klik, sub menunya bukan menurun ke bawah tapi malah kesampin. kenapa ya?

    BalasHapus
  54. Coba perhatikan baik-baik, dan alangkah baiknya Anda jangan edit dulu kode di atas, setelah berhasil baru edit.

    Untuk membuktikan berhasil tidaknya Anda bisa kunjungi situ ini Editor

    Setelah masuk akan ada tampilan "Add CSS Here" Kamu ganti kata tersebut dengan kode yang nomor 3 di atas.

    Lalu ada kode "Add HTML Code Here" kamu ganti kata tersebut dengan kode horizontal drop down menu yang ini "ul id='menu'" dan seterusnya.

    Selanjutnya letakan kode nomor 4 tepat di atas kode "style" yang ada pada situs tersebut lalu klik preview.

    BalasHapus
  55. Terima kasih penjelasannya.
    Ternyata saya berhasil dengan tips mas Fajar yg satunya yaitu yg code html nya di taruh langsung (add gadget java script).

    Tfs ya :)

    BalasHapus
  56. kunjungi dan follow blog saya
    http://lukas-trys.blogspot.com

    BalasHapus
  57. gan kalo cuman mau nambahin menu kebawahnya aja ...gmna? jadi si menunya ga diganti gth tetep yg asalnya..cuman saya pngen nambahin buat kebwahnya aja.. gmna yah antidipasinya? mohon di cek ke blog ku

    BalasHapus
  58. Cukup nambahin kode di bawah class='submenu
    kana ada dari kode li sampai /li kmau tambahin lagi.

    Maaf ga bisa nulis HTML kode di kotak komentar.

    BalasHapus
  59. always work for me!!
    thanks bro

    BalasHapus
  60. salam bloger

    kalo sub dropdown menu munculnya di belakang postingan .... apanya yg salah itu mr. brooo ... help me please ....
    http://scootertolakbala.blogspot.com

    BalasHapus
  61. Coba ulangi lagi mas, mungkin ada yang salah dan pastikan kode HTML menunya letakan di bawah bagian akhir kode header blog mas.

    Jika masih gagal mas boleh baca menu drop down dengan animasi lainnya, seperti.

    Green Drop Down Menu

    Drop Down Animasi Untuk Blog

    BalasHapus
  62. salam blogger,,,
    saya baru coba menggunakan menu dan submenu,,,tapi kendala ada di menu dan submenu yang terbuka hanya menu Technology,,untuk menu yg lain yg ga bisa,,,apa yg kurang gan,,sy sudah coba di HTML editor hasilnya sama,,,thanks atas pencerahannya,,,
    ini E-mail sy : sdnpaseban07@gmail.com
    blog : sdnpaseban07.blogspot.com

    BalasHapus
  63. Postingan yang Sangat bagus dan menarik untuk dibaca tentang cara membuat menu horizontal dropdown.... Saya suka mengunjungi blog ini.

    BalasHapus
  64. kalau untuk wordpres gmn ya bung

    BalasHapus
  65. gan tanda # di isi url.nya siapa..............



    lihat my blog www.kleepons.blogspot.com

    BalasHapus
  66. Akhir'a brhasil juga buat menu dropdown,mksh bangett gan ^^
    ditunggu ya kunjungn'a

    BalasHapus
  67. yeeaaaaahhhh ,,, thx atas tutornya om ...
    he he he keren ih ...
    ih yaaa mohon caci makinya yaaaa,,, diBlog sederhana saya
    http://arteam-studio.blogspot.com

    BalasHapus
  68. gan, kok html yg mengedit letak dropdown menubarnya dimana ya?
    ane udah bikin, jadi, tapi letaknya terlalu kebawah, mau di naikin sedikit, apa ada solusi?

    BalasHapus
  69. gan gue masih bingung sama yang contoh nomer 6, headernya kan beda2, gue udah cari dan ketemu tapi beberapa kodenya berbeda, jadi gue bingung harus meletakkan kode menu drop downnya dibawah kode apa?, kan kodenya beda?
    mohon bantuannya :)

    BalasHapus
  70. Keren nih,boleh deh dicoba menu horizontal drop down nya..
    oh yah,yuk main-main juga ke http://be-bisnis-lah.blogspot.com/

    BalasHapus