Yap, pada kamis kali ini saya akan sharing tutorial membuat multilevel dropdown menu dengan efek animasi CSS3 keren. Bagi yang belum tahu, Dropdown menu adalah menu yang ketika disentuh dengan mouse (hover), akan keluar sub-menu-nya. Multilevel dropdown menu berarti menu yang sub-menunya memiliki sub menu lagi lebih dari 2 tingkat (banyak). Jadi, dropdown menu 3 level yang akan dibahas disini termasuk multi level dropdown menu.
Dropdown menu sangat bermanfaat untuk membuat taksonomi menu secara terstruktur. Biasanya digunakan jika menu pada website merupakan link kategori yang memiliki beberapa sub kategori. Dengan adanya dropdown menu, navigasi website menjadi mudah dan user-friendly.
So, bagaimana cara membuatnya? yuk simak bareng-bareng.
Kode HTML
<ul class=”menu-horizontal”>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a></li>
<li><a href=”#”>Menu 3 <span class=”arrow”></span></a>
<ul class=”submenu level-1″>
<li><a href=”#”>Level 1</a></li>
<li><a href=”#”>Level 1 <span class=”arrow”></span></a>
<ul class=”submenu level-2″>
<li><a href=”#”>Level 2</a></li>
<li><a href=”#”>Level 2 <span class=”arrow”></span></a>
<ul class=”submenu level-3″>
<li><a href=”#”>Level 3</a></li>
<li><a href=”#”>Level 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Kode CSS
.menu-wrapper {
margin:10px auto;
position: relative;
width:700px;
}
.menu-wrapper ul{
margin:0;
padding:0;
background-color: #333;
}
ul.menu-horizontal {
width:100%;
position: relative;
z-index:999;
}
ul.menu-horizontal li {
list-style: none;
}/*Style menu horizontal*/
ul.menu-horizontal >li{
display: inline-block;
}
ul.menu-horizontal li a{
position: relative;
display: block;
padding:10px 20px;
text-decoration: none;
color:#eee;
}
ul.menu-horizontal li a:hover {
background-color:#DD3D36;
-webkit-transition:all 0.5s ease-in-out;
}
/*Style Tanda panah pada menu yang mempunyai sub menu*/
ul.menu-horizontal >li >a >span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-top:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}
/*Style tanda panah pada sub menu level 1 dan level 2*/
ul.menu-horizontal li ul li span.arrow {
width:0;
height: 0;
border:5px solid transparent;
border-left:7px solid #eee;
position: absolute;
right: 5px;
top:17px;
}
/*Menyembunyikan sub menu ketika tidak dihover*/
ul.submenu {
position: absolute;
display: none;
}ul.submenu li {
position: relative;
}
/*untuk menciptakan efek animasi ketika dihover*/
@-webkit-keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@keyframes mantul-vertikal {
0%{top: -300px;opacity: 0;}
50%{top: 120%;opacity: 1;}
75%{top: 80%;opacity: 1;}
100%{opacity: 1;top:100%;}
}
@-webkit-keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
@keyframes mantul-horizontal {
0%{left:300%;opacity: 0}
50%{left: 80%;opacity: 1;}
75%{left: 110%;opacity: 1;}
100%{left:100%;opacity: 1}
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li:hover ul.level-1 {
min-width: 150px;
display: block;
top:100%;
-webkit-animation:mantul-vertikal 1s;
animation:mantul-vertikal 1s;
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li:hover ul.level-2 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}
/*Menampilkan sub menu level 1 ketika menu di hover*/
ul.menu-horizontal li ul li ul li:hover ul.level-3 {
min-width: 150px;
display: block;
-webkit-animation:mantul-horizontal 1s;
animation:mantul-horizontal 1s;
top:0;
left:100%;
}
Tidak seperti biasanya, untuk tutorial yang satu ini saya tidak akan menjelaskan kode-kodenya karena pasti akan sangat rumit dan panjang. Sebagai gantinya, saya menjelaskannya secara langsung dengan comment di dalam kode. Sementara, untuk hasilnya anda bisa lihat demo dibawah ini :
Sementara untuk link downloadnya ada disini : http://goo.gl/bwTBnL
Bagaimana? tertarik.. jangan lupa langsung praktekkan. Jika bermanfaat, bagikan ke teman dengan share ke media sosial. Jangan lupa datang lagi hari senin dan kamis depan karena akan ada artikel perdana lainnya yang menunggu anda!.
Sekian, Semoga bermanfaat..
~Muhammad Syakirurohman~
Cara Membuat Dropdown Menu 3 Level + Efek Animasi CSS3 - KBI Center
[…] kali ini saya akan sharing tutorial membuat multilevel dropdown menu dengan efek animasi CSS3 keren. Bagi yang belum tahu, Dropdown menu adalah menu yang ketika disentuh […]
Achmad Fadel
Gan css nya terlalu panjang dan lama di load >>
ini dia versi cepatnya : irit 603Byte lumayan percepat blog
——————————————————
.menu-wrapper{margin:10px auto;position:relative;width:700px}.menu-wrapper ul{margin:0;padding:0;background-color:#333}ul.menu-horizontal{width:100%;position:relative;z-index:999}ul.menu-horizontal li{list-style:none}ul.menu-horizontal>li{display:inline-block}ul.menu-horizontal li a{position:relative;display:block;padding:10px 20px;text-decoration:none;color:#eee}ul.menu-horizontal li a:hover{background-color:#dd3d36;-webkit-transition:all .5s ease-in-out}ul.menu-horizontal>li>a>span.arrow{width:0;height:0;border:5px solid transparent;border-top:7px solid #eee;position:absolute;right:5px;top:17px}ul.menu-horizontal li ul li span.arrow{width:0;height:0;border:5px solid transparent;border-left:7px solid #eee;position:absolute;right:5px;top:17px}ul.submenu{position:absolute;display:none}ul.submenu li{position:relative}@-webkit-keyframes mantul-vertikal{0%{top:-300px;opacity:0}50%{top:120%;opacity:1}75%{top:80%;opacity:1}100%{opacity:1;top:100%}}@keyframes mantul-vertikal{0%{top:-300px;opacity:0}50%{top:120%;opacity:1}75%{top:80%;opacity:1}100%{opacity:1;top:100%}}@-webkit-keyframes mantul-horizontal{0%{left:300%;opacity:0}50%{left:80%;opacity:1}75%{left:110%;opacity:1}100%{left:100%;opacity:1}}@keyframes mantul-horizontal{0%{left:300%;opacity:0}50%{left:80%;opacity:1}75%{left:110%;opacity:1}100%{left:100%;opacity:1}}ul.menu-horizontal li:hover ul.level-1{min-width:150px;display:block;top:100%;-webkit-animation:mantul-vertikal 1s;animation:mantul-vertikal 1s}ul.menu-horizontal li ul li:hover ul.level-2{min-width:150px;display:block;-webkit-animation:mantul-horizontal 1s;animation:mantul-horizontal 1s;top:0;left:100%}ul.menu-horizontal li ul li ul li:hover ul.level-3{min-width:150px;display:block;-webkit-animation:mantul-horizontal 1s;animation:mantul-horizontal 1s;top:0;left:100%}
——————————————————
Syakir Rahman
Mantap mas fadel tambahannya.. terima kasih banyak.. bagi pembaca lain yang menggunakan animasi ini tanpa ada niat mengeditnya, sebaiknya cssnya diganti saja sama versi compressnya mas fadel ini (y)
Udhy
keren gan, ane coba dulu tapi apa ini sudah valid html5 mas?
Syakir Rahman
Valid kok, ini kan cuma kode sederhana 🙂
Satrio Ade
Nice banget gan tutorialnya…. ane coba deh diblog satu lagi bikin menu dropdown keren kayak gini
Syakir Rahman
Sip.. silahkan gan 😀
Faiz Irfan
Mantap Gan Trik nya, Thx ya
Syakir Rahman
Sip, sama sama gan 😀
Leppy Hitam
Mantep cuy.. Ijin coba 😀
Btw, blog ini dari wordpress kan?
Syakir Rahman
Sip, silahkan.. Iyaa kenapa vroh?
TRenaldi
vroh apa tuh…?
Syakir Rahman
Coba tebak apaa? 😀
hery
mas boleh minta sorce code nya yg dah jadi ..
soalnya yg ini dah kucoba tapi gak nampil efeknya..
klo boleh di kirim via email aja ya mas..
Terimakasih
Syakir Rahman
Oke bentar tak kasih link downloadnya 🙂
kewel
wah keren sub menu animasi
kunjungi juga blog saya mas
masih simple sih 😀
http://kewelscience.blogspot.com
kewelscience.blogspot.com
Syakir Rahman
sipp
Muhammad Nuhan Nahidl
Wah.. boleh di coba nih gan… tipsnya buat belajaran.
Syakir Rahman
Sip, silahkan gan 🙂
Trikmu.com
Ni baru top ijin coba
Syakir Rahman
Yap, silahkan mas 🙂
SOE
enakan yang simple simple aja mas
Syakir Rahman
Yaaa tinggal edit aja.. ilangin animasinya heheh
banyak dicari
kunjungan pertama yang mengesankan gan…akan sy coba…semoga berhasil
Syakir Rahman
Sip.. jangan lupa balik lagi 😀
Gintink
Woish keren binggo hep’s
Alva
vroh, ini bisa di taroh di blogspot ga ? ajarin cara masangnya dong :((
Syakir Rahman
Bisa kok, sayangnya saya tidak bisa menulis tutorialnya secara spesifik di blog ini karena tiap template blog mempunyai struktur html yang berbeda-beda.. Termasuk dimana letak menu tersebut..
Lebih baik pelajari dulu saja semuanya. silahkan download dan coba sendiri. Nanti kalo udah ngerti pasti bisa sendiri buat pasang di blognya.
Alva
ooh gitu ya, secara singkat aja, css ditaruh dimana, html ditaruh dimana…., makasih ya…. butuh bgt cara masangnya…
Syakir Rahman
Kalau CSS-nya silahkan tempatkan di atas kode
]]></b:skin>
, kalo HTML-nya ini yang ga bisa saya jelaskan, karena saya sama sekali tidak tahu struktur kode html blog agan, dan setiap blog mempunyai struktur kode yang berbeda-beda.. Kalo mau coba-coba sih, cari aja kode untuk menu blog yang sudah ada, lalu ganti dengan kode html di atas.. Kode tersebut pastinya ada di antara tag<body>
dan</body>
.. Silahkan dicobaAlva
okay, thanks sekali gan, sangat membantu 🙂
Syakir Rahman
Sip, sama-sama 🙂
FS
keren, dicoba terapkan di blog 🙂
Syakir Rahman
Yaap. Silahkan mas 🙂
muhammmad irpandi
terimakasih gan, ini yang saya cari2 sukses truz!!!
Tiana Paytren Pontianak
Alhamdulillah…kelihatannya simpel gan, saya coba dulu 😉
Syakir Rahman
Silahkan
wahyudi
mas. cara menentukan posisi menu nya dmn?
saya mau ubah menu nya ke kiri
Syakir Rahman
Kalo mas mau tambahin buat blog, tambahkan kodenya di sidebar aja
Ilham Bahrul Muhit
nah mas ini yg saya cari,,,
thanks banget ya mas …
Syakir Rahman
Yap, sama sama
setyo
itu masang nya dimana gan? di blog bukan? kalo di blog masukin nya di template apa di laman?
Syakir Rahman
Masukin di template gan
adi
KURANG RESPONSIF
Syakir Rahman
Itu memang cuma riset, dan tidak difokuskan untuk responsif
RIDWAN
keren… maaf cara nyimpen nya gimana mas,,, di masukin dalam satu page aja kode css sama html nya ato beda page ??
Syakir Rahman
Coba di download dulu aja itu filenya..
L
Thx gan bermanfaat banget ^-^ segera diterapkan
pertanyaan : template saya udh ada menu dropdownnya tapi saya gk tau ngerubahnya gimana…? 😮
kunbal >> http://lspega.blogspot.com
L
Cara mbuat 1 level atau 2 level saja gimana?
Syakir Rahman
Hapus aja tag ul sampai penutupnya /ul untuk level yang tidak diinginkan..
Syakir Rahman
Coba liat dokumentasi merubah dropdown menu disini : http://www.syakirurohman.net/docs/cara-memasang-multi-level-dropdown-menu-di-template-first-rikays-v2/
AGUNG RAFIYUDIN
keren mas, tapi kalo mo ngambil data daftar menu ngambil dari database, script php-nya gimana ya?
Syakir Rahman
Pakai looping, biasanya pakai fungsi ‘foreach(){}’ atau ‘while(){}’, coba cari aja tutorialnya di website php
hm
Sangat sederhana. Izin nyoba. ..
herry
tq y gan, bermanfaat bagi ane
Muhib
kalau seumpama diganti onclick bisa nggak?
dropdownnya itu kan tinggal mengarahkan kursornya
jika diganti dengan di klik baru muncul dropdownnya apakah bisa?
Syakir Rahman
Bisa.. tetapi css selector pas hovernya diganti dengan class saat di klik itu
arif
Maaf newbie nih mas, menu css nya di simpan dimana didalam kode html? apa disembarang tempat? Trims infonya
Syakir Rahman
diantara tag style mas
suryaandi
saya akan berguru dg blog ini sebap apa yg saya cari ada di blog ini….saya sangat pengen mahir dlm css dan html. Apa bila saya brhasil di sini maka akn bnyk blog yg akan berkunjung ke blog nya syakiruro. Saya yakin itu. slm
sumanto
terima kasih mas syakir rahman, sangat bermanfaat sekali bagi saya, semoga bermanfaat. amiin
Gaya Minimalis
Terimakasih Mas berhasil
Akhmad
Cara bikin Dropdown menu di blogger gimana ya mas?
syakirurahman
Yang ini juga bisa diterapkan kok