Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Open Current SubMenu; Toggle on Hover
/**
* WordPress menu
*
* Opens the current page's submenu. When hovering over another top-level
* menu item, it closes the open submenu and opens the other.
*
* Only operates if the current menu item is defined, so it won't do
* anything on pages that don't have a submenu or don't have a
* current menu item (ie. if you don't have a "Home" menu item and submenu,
* it won't do anything on the home page).
*/
( function( $ ) {
var menu, menuitems, current;
menu = $( '.nav-menu' ); // class name of the top-level menu UL
menuitems = menu.children( 'li' ); // the top-level children
current = menu.children( '.current-menu-parent' )[0]; // the current top-level parent item
if ( 'undefined' === typeof current ) {
current = menu.find( 'current-menu-item' )[0]; // the current top-level menu item
}
/**
* Only work if the current variable is defined
*/
if ( 'undefined' === typeof current ) { return; }
/**
* If current doesn't already have it, add the "open" class to display the submenu
*/
$( function() {
if ( ! $(current).hasClass( 'open' ) ) {
$(current).addClass( 'open' );
}
});
/**
* If another top-level menu item is hovered over, close the current
* submenu and display the hovered submenu
*/
menuitems.each( function() {
var item = $(this);
item.hover( function() {
$(current).toggleClass( 'open' );
item.toggleClass( 'open' );
});
});
} )( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment