/*! jQuery navigation.js Adds toggle icon for mobile navigation and dropdown animations for widescreen navigation Author: Thomas W (themezee.com) */ (function($) { /**-------------------------------------------------------------- # Responsive Navigation for WordPress menus --------------------------------------------------------------*/ $.fn.responsiveMenu = function( options ) { if ( options === undefined ) { options = {}; } /* Set Defaults */ var defaults = { menuID: "menu", toggleClass: "menu-toggle", toggleText: "", maxWidth: "60em" }; /* Set Variables */ var vars = $.extend( {}, defaults, options ), menuID = vars.menuID, toggleID = (vars.toggleID) ? vars.toggleID : vars.toggleClass, toggleClass = vars.toggleClass, toggleText = vars.toggleText, maxWidth = vars.maxWidth, $this = $( this ), $menu = $( '#' + menuID ); /********************* * Desktop Navigation * **********************/ /* Set and reset dropdown animations based on screen size */ if (typeof matchMedia == 'function') { var mq = window.matchMedia( '(max-width: ' + maxWidth + ')' ); mq.addListener( widthChange ); widthChange( mq ); } function widthChange(mq) { if (mq.matches) { /* Reset desktop navigation menu dropdown animation on smaller screens */ $menu.find( 'ul.sub-menu' ).css( { display: 'block' } ); $menu.find( 'li ul.sub-menu' ).css( { visibility: 'visible', display: 'block' } ); $menu.find( 'li.menu-item-has-children' ).unbind( 'mouseenter mouseleave' ); $menu.find( 'li.menu-item-has-children ul.sub-menu' ).each( function() { $( this ).hide(); $( this ).parent().find( '.submenu-dropdown-toggle' ).removeClass( 'active' ); } ); } else { /* Add dropdown animation for desktop navigation menu */ $menu.find( 'ul.sub-menu' ).css( { display: 'none' } ); $menu.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' } ); } ); } } /******************** * Mobile Navigation * *********************/ /* Add Menu Toggle Button for mobile navigation */ $this.before( '' ); /* Add dropdown toggle for submenus on mobile navigation */ $menu.find( 'li.menu-item-has-children' ).prepend( '' ); /* Add dropdown slide animation for mobile devices */ $( '#' + toggleID ).on('click', function(){ $menu.slideToggle(); $( this ).toggleClass( 'active' ); }); /* Add dropdown animation for submenus on mobile navigation */ $menu.find( 'li.menu-item-has-children .sub-menu' ).each( function () { $( this ).hide(); } ); $menu.find( '.submenu-dropdown-toggle' ).on('click', function(){ $( this ).parent().find( 'ul:first' ).slideToggle(); $( this ).toggleClass( 'active' ); }); }; /**-------------------------------------------------------------- # Setup Navigation Menus --------------------------------------------------------------*/ $( document ).ready( function() { /* Setup Main Navigation */ $( "#mainnav" ).responsiveMenu({ menuID: "mainnav-menu", toggleID: "mainnav-toggle", toggleClass: "nav-toggle", toggleText: dynamicnews_menu_title, maxWidth: "60em" }); /* Setup Top Navigation */ $( "#topnav" ).responsiveMenu({ menuID: "topnav-menu", toggleID: "topnav-toggle", toggleClass: "nav-toggle", maxWidth: "55em" }); } ); }(jQuery));