Trying to make theme dropdown menu OnClick instead of hover
Generally you should use classes that theme uses to manage showing and hiding menu in order to keep it compatible.
CODE RESPOSIBLE FOR HOVER MENU (custom.js):
var $et_top_menu = $( 'ul.nav' );
$et_top_menu.find( 'li' ).hover( function() {
if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
$(this).addClass( 'et-show-dropdown' );
$(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
}
}, function() {
var $this_el = $(this);
$this_el.removeClass( 'et-show-dropdown' );
setTimeout( function() {
if ( ! $this_el.hasClass( 'et-show-dropdown' ) ) {
$this_el.removeClass( 'et-hover' );
}
}, 200 );
} );
HOW TO UNBIND TRIGGERING HOVER EVENT #1 (if you want to do this somewhere else after it is initialized in custom.js):
$( 'ul.nav li' ).off("hover");
HOW TO UNBIND TRIGGERING HOVER EVENT #2 (if you want to modify custom.js right after the code):
$et_top_menu.find( 'li' ).off("hover");
HOW TO UNBIND TRIGGERING HOVER EVENT #3 (if you want to modify custom.js :
Just remove the code and replace it with your on click event code
HOW TO MAKE ON CLICK EVENT - if you want to leave previous hover code - past below the hover code or use it in your place - note it must be used after custom.js or inside after hover code:
$( 'ul.nav li' ).off("hover");
$et_top_menu.find( 'li' ).click( function() {
if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
$(this).toggleClass( 'et-show-dropdown' );
$(this).toggleClass( 'et-hover' );
}
});
The code i gave you has no anitmation so do it on your own. Simplest way is to use CSS for example:
<YOUR SELECTOR> {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
FIDDLE EXAMPLE - it turns off HOVER event and set up ON CLICK event.
http://jsfiddle.net/gwn9aqxs/2/
I added some CSS classes in order to keep it compatible with your theme css classes. I added "nav" classs to parent UL just like it in your theme and i added "mega-menu" class to li parent of ul.sub-menu just like in your theme.