https://mkk.de/media/layout/js/jquerydlmenu.js

1/**
2 * jquery.dlmenu.js v1.0.1
3 * http://www.codrops.com
4 *
5 * Licensed under the MIT license.
6 * http://www.opensource.org/licenses/mit-license.php
7 * 
8 * Copyright 2013, Codrops
9 * http://www.codrops.com
10 */
11;( function( $, window, undefined ) {
12	'use strict';
13
14	// global
15	var Modernizr = window.Modernizr, $body = $('body');
16
17	$.DLMenu = function (options, element) {
18		this.$el = $(element);
19		this._init(options);
20	};
21
22	// the options
23	$.DLMenu.defaults = {
24		// classes for the animation effects
25		animationClasses: {classin: 'dl-animate-in-1', classout: 'dl-animate-out-1'},
26		// callback: click a link that has a sub menu
27		// el is the link element (li); name is the level name
28		onLevelClick: function (el, name) {
29			return false;
30		},
31		// callback: click a link that does not have a sub menu
32		// el is the link element (li); ev is the event obj
33		onLinkClick: function (el, ev) {
34			return false;
35		}
36	};
37
38	$.DLMenu.prototype = {
39		_init: function (options) {
40
41			// options
42			this.options = $.extend(true, {}, $.DLMenu.defaults, options);
43			// cache some elements and initialize some variables
44			this._config();
45
46			var animEndEventNames = {
47					'WebkitAnimation': 'webkitAnimationEnd',
48					'OAnimation': 'oAnimationEnd',
49					'msAnimation': 'MSAnimationEnd',
50					'animation': 'animationend'
51				},
52				transEndEventNames = {
53					'WebkitTransition': 'webkitTransitionEnd',
54					'MozTransition': 'transitionend',
55					'OTransition': 'oTransitionEnd',
56					'msTransition': 'MSTransitionEnd',
57					'transition': 'transitionend'
58				};
59			// animation end event name
60			this.animEndEventName = animEndEventNames[Modernizr.prefixed('animation')] + '.dlmenu';
61			// transition end event name
62			this.transEndEventName = transEndEventNames[Modernizr.prefixed('transition')] + '.dlmenu',
63				// support for css animations and css transitions
64				this.supportAnimations = Modernizr.cssanimations,
65				this.supportTransitions = Modernizr.csstransitions;
66
67			this._initEvents();
68
69		},
70		_config: function () {
71			this.open = false;
72			this.$trigger = this.$el.children('.dl-trigger');
73			this.$menu = this.$el.children('ul.dl-menu');
74			this.$menuitems = this.$menu.find('li:not(.dl-back)');
75			this.$el.find('ul.dl-submenu').prepend('<li class="dl-back"><a href="#">Zurück</a></li>');
76			this.$back = this.$menu.find('li.dl-back');
77		},
78		_initEvents: function () {
79
80			var self = this;
81			this.$trigger.on('click.dlmenu', function () {
82				if (self.open) {
83					self._closeMenu();
84				}
85				else {
86					self._openMenu();
87				}
88				return false;
89
90			});
91
92			this.$menuitems.on('click.dlmenu', function (event) {
93
94				event.stopPropagation();
95
96				var $item = $(this),
97					$submenu = $item.children('ul.dl-submenu');
98
99				if ($submenu.length > 0) {
100
101					if (Modernizr.mq('(max-width: ' + self.options.maxWidth + 'px)')) {
102						var $flyin = $submenu.clone().css('opacity', 0).insertAfter(self.$menu),
103							onAnimationEndFn = function () {
104								self.$menu.off(self.animEndEventName).removeClass(self.options.animationClasses.classout).addClass('dl-subview');
105								$item.addClass('dl-subviewopen').parents('.dl-subviewopen:first').removeClass('dl-subviewopen').addClass('dl-subview');
106								$flyin.remove();
107							};
108
109						setTimeout(function () {
110							$flyin.addClass(self.options.animationClasses.classin);
111							self.$menu.addClass(self.options.animationClasses.classout);
112							if (self.supportAnimations) {
113								self.$menu.on(self.animEndEventName, onAnimationEndFn);
114							}
115							else {
116								onAnimationEndFn.call();
117							}
118
119							self.options.onLevelClick($item, $item.children('a:first').text());
120						});
121					}
122
123					return false;
124
125				}
126				else {
127					self.options.onLinkClick($item, event);
128				}
129
130			});
131
132			this.$back.on('click.dlmenu', function (event) {
133
134				var $this = $(this),
135					$submenu = $this.parents('ul.dl-submenu:first'),
136					$item = $submenu.parent(),
137
138					$flyin = $submenu.clone().insertAfter(self.$menu);
139
140				var onAnimationEndFn = function () {
141					self.$menu.off(self.animEndEventName).removeClass(self.options.animationClasses.classin);
142					$flyin.remove();
143				};
144
145				setTimeout(function () {
146					$flyin.addClass(self.options.animationClasses.classout);
147					self.$menu.addClass(self.options.animationClasses.classin);
148					if (self.supportAnimations) {
149						self.$menu.on(self.animEndEventName, onAnimationEndFn);
150					}
151					else {
152						onAnimationEndFn.call();
153					}
154
155					$item.removeClass('dl-subviewopen');
156
157					var $subview = $this.parents('.dl-subview:first');
158					if ($subview.is('li')) {
159						$subview.addClass('dl-subviewopen');
160					}
161					$subview.removeClass('dl-subview');
162				});
163
164				return false;

165
166			});
167
168		},
169		closeMenu: function () {
170			if (this.open) {
171				this._closeMenu();
172			}
173		},
174		_closeMenu: function () {
175			var self = this,
176				onTransitionEndFn = function () {
177					self.$menu.off(self.transEndEventName);
178					self._resetMenu();
179				};
180
181			this.$menu.removeClass('dl-menuopen');
182			this.$menu.addClass('dl-menu-toggle');
183			this.$trigger.removeClass('dl-active');
184
185			if (this.supportTransitions) {
186				this.$menu.on(this.transEndEventName, onTransitionEndFn);
187			}
188			else {
189				onTransitionEndFn.call();
190			}
191
192			this.open = false;
193		},
194		openMenu: function () {
195			if (!this.open) {
196				this._openMenu();
197			}
198		},
199		_openMenu: function () {
200			var self = this;
201			//if any bootstrap navs are currently open, close them
202			$('.navbar-toggle').each(function() {
203				if(!$(this).hasClass('collapsed')) {
204					$(this).trigger( "click" );
205				}
206			});
207
208			// clicking somewhere else makes the menu close
209			$body.off('click').on('click.dlmenu', function () {
210				self._closeMenu();
211			});
212			this.$menu.addClass('dl-menuopen dl-menu-toggle').on(this.transEndEventName, function () {
213				$(this).removeClass('dl-menu-toggle');
214			});
215			this.$trigger.addClass('dl-active');
216			this.open = true;
217		},
218		// resets the menu to its original state (first level of options)
219		_resetMenu: function () {
220			this.$menu.removeClass('dl-subview');
221			this.$menuitems.removeClass('dl-subview dl-subviewopen');
222			setNavToActive();
223		}
224	};
225
226	var logError = function (message) {
227		if (window.console) {
228			window.console.error(message);
229		}
230	};
231
232	$.fn.dlmenu = function (options) {
233		if (typeof options === 'string') {
234			var args = Array.prototype.slice.call(arguments, 1);
235			this.each(function () {
236				var instance = $.data(this, 'dlmenu');
237				if (!instance) {
238					logError("cannot call methods on dlmenu prior to initialization; " +
239						"attempted to call method '" + options + "'");
240					return;
241				}
242				if (!$.isFunction(instance[options]) || options.charAt(0) === "_") {
243					logError("no such method '" + options + "' for dlmenu instance");
244					return;
245				}
246				instance[options].apply(instance, args);
247			});
248		}
249		else {
250			this.each(function () {
251				var instance = $.data(this, 'dlmenu');
252				if (instance) {
253					instance._init();
254				}
255				else {
256					instance = $.data(this, 'dlmenu', new $.DLMenu(options, this));
257				}
258			});
259		}
260		setNavToActive();
261		return this;
262	};
263} )( jQuery, window );
264
265function setNavToActive() {
266	$('#primaryNavigation').find('.current').each(function() {
267		var $this = $(this);
268		//set class for active element
269		$this.addClass("dl-subviewopen");
270
271		//set active classes for all parents
272		var $par = $this.parent();
273		//recurse through menu structure
274		while($par.attr('id') != 'primaryNavigation') {
275			if($par.is("li") || $par.is(".dl-menu")) {
276				$par.addClass('dl-subview current-parent');
277			}
278			$par = $par.parent();
279		}
280	});
281}