https://www.zuerilive.ch/wp-content/themes/dynamic-news-lite/js/navigation.js?ver=20210324

1/*! jQuery navigation.js
2  Adds toggle icon for mobile navigation and dropdown animations for widescreen navigation
3  Author: Thomas W (themezee.com)
4*/
5
6(function($) {
7
8	/**--------------------------------------------------------------
9	# Responsive Navigation for WordPress menus
10	--------------------------------------------------------------*/
11	$.fn.responsiveMenu = function( options ) {
12
13		if ( options === undefined ) {
14			options = {};
15		}
16
17		/* Set Defaults */
18		var defaults = {
19			menuID: "menu",
20			toggleClass: "menu-toggle",
21			toggleText: "",
22			maxWidth: "60em"
23		};
24
25		/* Set Variables */
26		var vars = $.extend( {}, defaults, options ),
27			menuID = vars.menuID,
28			toggleID = (vars.toggleID) ? vars.toggleID : vars.toggleClass,
29			toggleClass = vars.toggleClass,
30			toggleText = vars.toggleText,
31			maxWidth = vars.maxWidth,
32			$this = $( this ),
33			$menu = $( '#' + menuID );
34
35		/*********************
36		* Desktop Navigation *
37		**********************/
38
39		/* Set and reset dropdown animations based on screen size */
40		if (typeof matchMedia == 'function') {
41			var mq = window.matchMedia( '(max-width: ' + maxWidth + ')' );
42			mq.addListener( widthChange );
43			widthChange( mq );
44		}
45		function widthChange(mq) {
46
47			if (mq.matches) {
48
49				/* Reset desktop navigation menu dropdown animation on smaller screens */
50				$menu.find( 'ul.sub-menu' ).css( { display: 'block' } );
51				$menu.find( 'li ul.sub-menu' ).css( { visibility: 'visible', display: 'block' } );
52				$menu.find( 'li.menu-item-has-children' ).unbind( 'mouseenter mouseleave' );
53
54				$menu.find( 'li.menu-item-has-children ul.sub-menu' ).each( function() {
55					$( this ).hide();
56					$( this ).parent().find( '.submenu-dropdown-toggle' ).removeClass( 'active' );
57				} );
58
59			} else {
60
61				/* Add dropdown animation for desktop navigation menu */
62				$menu.find( 'ul.sub-menu' ).css( { display: 'none' } );
63				$menu.find( 'li.menu-item-has-children' ).hover( function() {
64					$( this ).find( 'ul:first' ).css( { visibility: 'visible', display: 'none' } ).slideDown( 300 );
65				}, function() {
66					$( this ).find( 'ul:first' ).css( { visibility: 'hidden' } );
67				} );
68
69			}
70
71		}
72
73		/********************
74		* Mobile Navigation *
75		*********************/
76
77		/* Add Menu Toggle Button for mobile navigation */
78		$this.before( '<button id=\"' + toggleID + '\" class=\"' + toggleClass + '\">' + toggleText + '</button>' );
79
80		/* Add dropdown toggle for submenus on mobile navigation */
81		$menu.find( 'li.menu-item-has-children' ).prepend( '<span class=\"submenu-dropdown-toggle\"></span>' );
82
83		/* Add dropdown slide animation for mobile devices */
84		$( '#' + toggleID ).on('click', function(){
85			$menu.slideToggle();
86			$( this ).toggleClass( 'active' );
87		});
88
89		/* Add dropdown animation for submenus on mobile navigation */
90		$menu.find( 'li.menu-item-has-children .sub-menu' ).each( function () {
91			$( this ).hide();
92		} );
93		$menu.find( '.submenu-dropdown-toggle' ).on('click', function(){
94			$( this ).parent().find( 'ul:first' ).slideToggle();
95			$( this ).toggleClass( 'active' );
96		});
97
98	};
99
100	/**--------------------------------------------------------------
101	# Setup Navigation Menus
102	--------------------------------------------------------------*/
103	$( document ).ready( function() {
104
105		/* Setup Main Navigation */
106		$( "#mainnav" ).responsiveMenu({
107			menuID: "mainnav-menu",
108			toggleID: "mainnav-toggle",
109			toggleClass: "nav-toggle",
110			toggleText: dynamicnews_menu_title.text,
111			maxWidth: "60em"
112		});
113
114		/* Setup Top Navigation */
115		$( "#topnav" ).responsiveMenu({
116			menuID: "topnav-menu",
117			toggleID: "topnav-toggle",
118			toggleClass: "nav-toggle",
119			maxWidth: "55em"
120		});
121
122	} );
123
124}(jQuery));