/**
* Navigation Menu Plugin
*
* Copyright 2016 ThemeZee
* Free to use under the GPLv2 and later license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Author: Thomas Weichselbaumer (themezee.com)
*
* @package Admiral
*/
(function($) {
/**--------------------------------------------------------------
# Add Desktop Dropdown Animation
--------------------------------------------------------------*/
$.fn.addDropdownAnimation = function() {
/* Add dropdown animation for desktop navigation menu */
$( this ).find( 'ul.sub-menu' ).css( { display: 'none' } );
$( this ).find( 'li.menu-item-has-children' ).hover( function() {
$( this ).find( 'ul:first' ).css( { visibility: 'visible', display: 'none' } ).slideDown( 300 );
}, function() {
$( this ).find( 'ul:first' ).css( { visibility: 'hidden' } );
} );
/* Make sure menu does not fly off the right of the screen */
$( this ).find( 'li ul.sub-menu li.menu-item-has-children' ).mouseenter( function() {
if ( $( this ).children( 'ul.sub-menu' ).offset().left + 250 > $( window ).width() ) {
$( this ).children( 'ul.sub-menu' ).css( { right: '100%', left: 'auto' } );
}
});
// Add menu items with submenus to aria-haspopup="true".
$( this ).find( 'li.menu-item-has-children' ).attr( 'aria-haspopup', 'true' ).attr( 'aria-expanded', 'false' );
/* Properly update the ARIA states on focus (keyboard) and mouse over events */
$( this ).find( 'li.menu-item-has-children > a' ).on( 'focus.aria mouseenter.aria', function() {
$( this ).parents( '.menu-item' ).attr( 'aria-expanded', true ).find( 'ul:first' ).css( { visibility: 'visible', display: 'block' } );
} );
/* Properly update the ARIA states on blur (keyboard) and mouse out events */
$( this ).find( 'li.menu-item-has-children > a' ).on( 'blur.aria mouseleave.aria', function() {
if( ! $( this ).parent().next( 'li' ).length > 0 && ! $( this ).next('ul').length > 0 ) {
$( this ).closest( 'li.menu-item-has-children' ).attr( 'aria-expanded', false ).find( '.sub-menu' ).css( { display: 'none' } );
}
} );
};
/**--------------------------------------------------------------
# Reset Desktop Dropdown Animation
--------------------------------------------------------------*/
$.fn.resetDropdownAnimation = function() {
/* Reset desktop navigation menu dropdown animation on smaller screens */
$( this ).find( 'ul.sub-menu' ).css( { display: 'block' } );
$( this ).find( 'li ul.sub-menu' ).css( { visibility: 'visible', display: 'block' } );
$( this ).find( 'li.menu-item-has-children' ).unbind( 'mouseenter mouseleave' );
$( this ).find( 'li.menu-item-has-children ul.sub-menu' ).each( function() {
$( this ).hide();
$( this ).parent().find( '.submenu-dropdown-toggle' ).removeClass( 'active' );
} );
/* Remove ARIA states on mobile devices */
$( this ).find( 'li.menu-item-has-children > a' ).unbind( 'focus.aria mouseenter.aria blur.aria mouseleave.aria' );
};
/**--------------------------------------------------------------
# Add submenus dropdowns for mobile menu
--------------------------------------------------------------*/
$.fn.addMobileSubmenu = function() {
/* Add dropdown toggle for submenus on mobile navigation */
$( this ).find('li.menu-item-has-children').prepend('');
$( this ).find('li.page_item_has_children').prepend('');
/* Add dropdown animation for submenus on mobile navigation */
$( this ).find('.submenu-dropdown-toggle').on('click', function(){
$( this ).parent().find('ul:first').slideToggle();
$( this ).toggleClass('active');
});
};
/**--------------------------------------------------------------
# Setup Navigation Menus
--------------------------------------------------------------*/
$( document ).ready( function() {
/* Variables */
var main_menu = $('.main-navigation-menu'),
header_menu = $('.header-navigation-menu'),
menu_wrap = $('.main-navigation-menu-wrap');
/* Add Listener for screen size */
if(typeof matchMedia == 'function') {
var mq = window.matchMedia('(max-width: 60em)');
mq.addListener(widthChange);
widthChange(mq);
}
function widthChange(mq) {
if (mq.matches) {
/* Reset desktop navigation menu dropdown animation on smaller screens */
main_menu.resetDropdownAnimation();
header_menu.resetDropdownAnimation();
/* Copy header navigation items to main navigation on mobile screens */
header_menu.appendTo( menu_wrap ).addClass('mobile-header-menu');
} else {
/* Add dropdown animation for desktop navigation menu */
main_menu.addDropdownAnimation();
header_menu.addDropdownAnimation();
/* Copy Header Navigation back to original spot */
$('.mobile-header-menu').removeClass('mobile-header-menu').appendTo( $('#header-navigation') );
}
}
/* Add Menu Toggle Button for mobile navigation */
$("#main-navigation").before('');
/* Add dropdown slide animation for mobile devices */
$('#main-navigation-toggle').on('click', function(){
menu_wrap.slideToggle();
$( this ).toggleClass('active');
});
/* Add submenus for mobile navigation menu */
main_menu.addMobileSubmenu();
header_menu.addMobileSubmenu();
} );
}(jQuery));