See the world with heart
Latest Post
Simple Drop Down Sub Menu with Accordion Efect
Posted by jejak on Dec 23, 2011 in Web Designs , Portfolio , LESS , HTML , CSS | 5 comments
Kasus ini saya dapat ketika mengerjakan website Miss Indonesia 2012 yang belum lama di launching dengan desain barunya. Sebenarnya ini menu horizontal sederhana dengan drop down sub menu menggunakan efek accordion. Cukup sederhana, namun saya tidak berhasil menemukan contoh seperti ini, apa boleh buat akhirnya saya mencoba-coba custom.
Pada menu ini, saya mencoba untuk tidak menggunakan images sama sekali. Hanya menggunakan CSS3 dengan LESS, HTML5 dan jQuery untuk Accordion efect nya. Saya sudah sedikit melakukan test di browser Firefox, Chrome, Safari dan Opera, menu ini jalan baik-baik saja.Tapi masi ada kekurangan dari menu yang saya buat ini, tidak jalan di browser Internet Explorer versi berapapun. Ini karena saya menggunakan "display: block" pada menu. Maaf untuk kekurangan ini, mungkin anda tau cara mengatasi bug tersebut?
The Styles
Beberapa tag CSS3 yang saya gunakan pada desain menu ini di antaranya:
border-radius;
box-shadow;
gradient;
Lalu untuk garis-garis vertikal pemisah antara menu, saya hanya menggunakan border-left dan border-right pada masing-masing menu. Lalu pada menu-menu ujung (kiri dan kanan) saya set border: none, itu saja. Simpel kan?
The jQuery
Sedangkan untuk efek accordion pada sub menu, cukup membuat fungsi sederhana dengan jQuery:
function initMenu() {
$('.dropdown ul').hide();
$('.dropdown li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$('.dropdown ul:visible').slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('.dropdown ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
Sebuah fungsi yang sederhana bukan? Hanya menggunakan sekitar empat event jQuery saja, seperti: hide, click, slideUp dan slideDown. Pastinya, mas Didit lah yang banyak membantu saya untuk urusan jQuery ini. Thanks so much.
Untuk melihat demo, silahkan klik di sini dan untuk mendownload files silahkan klik di sini. Semoga bermanfaat.
note: mohon infonya (browser berikut versinya dan OS yang digunakan) dari anda jika demo yang saya berikan tidak jalan. Tes yang saya lakukan hanya di Mac OS Lion dan Win untuk tes IE Browser.
5 Responses to Simple Drop Down Sub Menu with Accordion Efect
Wuiiiih makin jago ajah masden.. ie-nya gmana dong masden :p
Naah, ini dia orang yang bikinin web saiyah :D keren lah. Seneng dong kalo web gw update yah. Itu dia ndar, barang kali lo tau caranya biar jalan di IE?
Mungkin jalan di IE9 (yay)
mantab masden... jadi lebih ringkes untuk navigasi dengan 3 level submenu-nya...:)
Wah, makasi loh mas Dit. Jadi deh menunya :) Terus, piye tutorial box-shadow + transform nya jadi naik gak tu? Uda gatel inih.. :p