I have this megamenu working, but it's clunky. So I'm trying to slow down the slidedown effect with some additional jQuery (which is the second section of code you see below). So far I seem to be grabbing the wrong elements though. What elements should I be placing in the last section of jQuery code in order to target the drop-menu items, rather than the whole menu? Right now the whole menu vanishes when clicked, rather than the individual elements.
jQuery(document).ready(function(jQuery) {
var menu = jQuery('#mega-menu-wrap-secondary'); // change this to target your menu
// do not edit below this line
jQuery('li.mega-menu-item', menu).on('open_panel', function(e) {
var sub_menu = jQuery('.mega-sub-menu', jQuery(this));
menu.css('margin-bottom', sub_menu.height());
});
jQuery('li.mega-menu-item', menu).on('close_panel', function(e) {
menu.css('margin-bottom', '');
});
});
jQuery(document).ready(function(){
jQuery(".mega-menu").mouseenter( function() {
jQuery("li.mega-menu-item").slideDown(1000);
});
jQuery(".mega-menu").mouseleave( function() {
jQuery("li.mega-menu-item").slideUp(1000);
});
});