https://rheinischer-spiegel.de/wp-content/themes/merlin/js/navigation.js?ver=20160719

1/**
2 * jQuery Navigation Plugin
3 * Includes responsiveMenu() and flipMenu() functions
4 *
5 * Copyright 2015 ThemeZee
6 * Free to use under the GPLv2 and later license.
7 * http://www.gnu.org/licenses/gpl-2.0.html
8 *
9 * Author: Thomas Weichselbaumer (themezee.com)
10 *
11 * @package Merlin
12 */
13
14(function($) {
15
16	/**--------------------------------------------------------------
17	# Responsive Navigation for WordPress menus
18	--------------------------------------------------------------*/
19	$.fn.responsiveMenu = function( options ) {
20
21		if (options === undefined) options = {};
22
23		/* Set Defaults */
24		var defaults = {
25			menuClass: "menu",
26			toggleClass: "menu-toggle",
27			toggleText: "",
28			maxWidth: "60em"
29		};
30
31		/* Set Variables */
32		var vars = $.extend({}, defaults, options),
33			menuClass = vars.menuClass,
34			toggleID = (vars.toggleID) ? vars.toggleID : vars.toggleClass,
35			toggleClass = vars.toggleClass,
36			toggleText = vars.toggleText,
37			maxWidth = vars.maxWidth,
38			$this = $(this),
39			$menu = $('.' + menuClass);
40
41
42		/*********************
43		* Desktop Navigation *
44		**********************/
45
46		/* Set and reset dropdown animations based on screen size */
47		if(typeof matchMedia == 'function') {
48			var mq = window.matchMedia('(max-width: ' + maxWidth + ')');
49			mq.addListener(widthChange);
50			widthChange(mq);
51		}
52		function widthChange(mq) {
53
54			if (mq.matches) {
55
56				/* Reset desktop navigation menu dropdown animation on smaller screens */
57				$menu.find( 'ul.sub-menu' ).css( { display: 'block' } );
58				$menu.find( 'li ul.sub-menu' ).css( { visibility: 'visible', display: 'block' } );
59				$menu.find( 'li.menu-item-has-children' ).unbind( 'mouseenter mouseleave' );
60
61				$menu.find( 'li.menu-item-has-children ul.sub-menu' ).each( function() {
62					$( this ).hide();
63					$( this ).parent().find( '.submenu-dropdown-toggle' ).removeClass( 'active' );
64				} );
65
66			} else {
67
68				/* Add dropdown animation for desktop navigation menu */
69				$menu.find( 'ul.sub-menu' ).css( { display: 'none' } );
70				$menu.find( 'li.menu-item-has-children' ).hover( function() {
71					$( this ).find( 'ul:first' ).css( { visibility: 'visible', display: 'none' } ).slideDown( 300 );
72				}, function() {
73					$( this ).find( 'ul:first' ).css( { visibility: 'hidden' } );
74				} );
75
76			}
77
78		}
79
80
81		/********************
82		* Mobile Navigation *
83		*********************/
84
85		/* Add Menu Toggle Button for mobile navigation */
86		$this.before('<button id=\"' + toggleID + '\" class=\"' + toggleClass + '\">' + toggleText + '</button>');
87
88		/* Add dropdown toggle for submenus on mobile navigation */
89		$menu.find('li.menu-item-has-children').prepend('<span class=\"submenu-dropdown-toggle\"></span>');
90
91		/* Add dropdown slide animation for mobile devices */
92		$('#' + toggleID).on('click', function(){
93			$menu.slideToggle();
94			$(this).toggleClass('active');
95		});
96
97		/* Add dropdown animation for submenus on mobile navigation */
98		$menu.find('li.menu-item-has-children .sub-menu').each( function () {
99			$( this ).hide();
100		} );
101		$menu.find('.submenu-dropdown-toggle').on('click', function(){
102			$(this).parent().find('ul:first').slideToggle();
103			$(this).toggleClass('active');
104		});
105
106	};
107
108	/**--------------------------------------------------------------
109	# Flip between dropdown menus for Social Icons and Top Navigation
110	--------------------------------------------------------------*/
111	$.fn.flipMenu = function( options ) {
112
113		if (options === undefined) options = {};
114
115		/* Set Defaults */
116		var defaults = {
117			menuClass: "menu",
118			flipMenuClass: "menu",
119			toggleClass: "menu-toggle",
120			toggleText: ""
121		};
122
123		/* Set Variables */
124		var vars = $.extend({}, defaults, options),
125			menuClass = vars.menuClass,
126			flipMenuClass = vars.flipMenuClass,
127			toggleID = (vars.toggleID) ? vars.toggleID : vars.toggleClass,
128			toggleClass = vars.toggleClass,
129			toggleText = vars.toggleText,
130			$this = $(this),
131			$menu = $('.' + menuClass),
132			$flipMenu = $('.' + flipMenuClass);
133
134
135		/* Add both Menu Toggle Buttons */
136		$this.before('<button id=\"' + toggleID + '\" class=\"' + toggleClass + '\">' + toggleText + '</button>');
137
138		/* Add dropdown slide animation for mobile devices */
139		$('#' + toggleID).on('click', function(){
140			if( $flipMenu.is(':visible') ) {
141				$flipMenu.slideToggle();
142				$menu.delay(400).slideToggle();
143			} else {
144				$menu.slideToggle();
145			}
146			$(this).toggleClass('active');
147		});
148
149	};
150
151
152	/**--------------------------------------------------------------
153	# Setup Navigation Menus
154	--------------------------------------------------------------*/
155	$( document ).ready( function() {
156
157		/* Setup Main Navigation */
158		$("#main-navigation").responsiveMenu({
159			menuClass: "main-navigation-menu",
160			toggleClass: "main-navigation-toggle",
161			maxWidth: "60em"
162		});
163
164		/* Setup Top Navigation */
165		$("#top-navigation").responsiveMenu({
166			menuClass: "top-navigation-menu",
167			toggleID: "top-navigation-toggle-tablet",
168			toggleClass: "top-navigation-toggle",
169			maxWidth: "65em"
170		});
171
172
173		/* Add flipMenu for social icons menu */
174		$("#header-social-icons").flipMenu({
175			menuClass: "social-icons-navigation",
176			flipMenuClass: "top-navigation-menu",
177			toggleClass: "social-icons-navigation-toggle"
178		});
179
180		/* Add flipMenu for top navigation */
181		$("#top-navigation").flipMenu({
182			menuClass: "top-navigation-menu",
183			flipMenuClass: "social-icons-navigation",
184			toggleID: "top-navigation-toggle-phone",
185			toggleClass: "top-navigation-toggle"
186		});
187
188		/* Setup Sticky Menu for main navigation menu */
189		var menu = $( '#main-navigation' );
190		var stickyNavTop = menu.offset().top;
191
192		stickyMenu = function() {
193
194			scrollTop = $(window).scrollTop();
195
196			/* Add Sticky class */
197			if (scrollTop > stickyNavTop) {
198				menu.addClass('sticky-nav-menu');
199			} else {
200				menu.removeClass('sticky-nav-menu');
201			}
202
203		}
204		stickyMenu();
205		$(window).scroll(function() {
206			stickyMenu();
207		});
208
209	} );
210
211}(jQuery));