https://techgizz.com/js/jquery.dlmenu.js

1/**
2 * jquery.dlmenu.js v1.0.0
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
13	'use strict';
14
15	// global
16	var Modernizr = window.Modernizr, $body = $( 'body' );
17
18	$.DLMenu = function( options, element ) {
19		this.$el = $( element );
20		this._init( options );
21	};
22
23	// the options
24	$.DLMenu.defaults = {
25		// classes for the animation effects
26		animationClasses : { in : 'dl-animate-in-1', out : 'dl-animate-out-1' }
27	};
28
29	$.DLMenu.prototype = {
30		_init : function( options ) {
31
32			// options
33			this.options = $.extend( true, {}, $.DLMenu.defaults, options );
34			// cache some elements and initialize some variables
35			this._config();
36			
37			var animEndEventNames = {
38					'WebkitAnimation' : 'webkitAnimationEnd',
39					'OAnimation' : 'oAnimationEnd',
40					'msAnimation' : 'MSAnimationEnd',
41					'animation' : 'animationend'
42				},
43				transEndEventNames = {
44					'WebkitTransition' : 'webkitTransitionEnd',
45					'MozTransition' : 'transitionend',
46					'OTransition' : 'oTransitionEnd',
47					'msTransition' : 'MSTransitionEnd',
48					'transition' : 'transitionend'
49				};
50			// animation end event name
51			this.animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ] + '.dlmenu';
52			// transition end event name
53			this.transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ] + '.dlmenu',
54			// support for css animations and css transitions
55			this.supportAnimations = Modernizr.cssanimations,
56			this.supportTransitions = Modernizr.csstransitions;
57
58			this._initEvents();
59
60		},
61		_config : function() {
62			this.open = false;
63			this.$trigger = this.$el.children( 'button' );
64			this.$menu = this.$el.children( 'ul.dl-menu' );
65			this.$menuitems = this.$menu.find( 'li:not(.dl-back)' );
66			this.$back = this.$menu.find( 'li.dl-back' );
67		},
68		_initEvents : function() {
69
70			var self = this;
71
72			this.$trigger.on( 'click.dlmenu', function() {
73				
74				if( self.open ) {
75					self._closeMenu();
76				} 
77				else {
78					self._openMenu();
79					// clicking somewhere else makes the menu close
80					$body.off( 'click' ).on( 'click.dlmenu', function() {
81						self._closeMenu() ;
82					} );
83					
84				}
85				return false;
86
87			} );
88
89			this.$menuitems.on( 'click.dlmenu', function( event ) {
90				
91				event.stopPropagation();
92
93				var $item = $(this),
94					$submenu = $item.children( 'ul.dl-submenu' );
95
96				if( $submenu.length > 0 ) {
97
98					var $flyin = $submenu.clone().insertAfter( self.$menu ).addClass( self.options.animationClasses.in ),
99						onAnimationEndFn = function() {
100							self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.out ).addClass( 'dl-subview' );
101							$item.addClass( 'dl-subviewopen' ).parents( '.dl-subviewopen:first' ).removeClass( 'dl-subviewopen' ).addClass( 'dl-subview' );
102							$flyin.remove();
103						};
104
105					self.$menu.addClass( self.options.animationClasses.out );
106
107					if( self.supportAnimations ) {
108						self.$menu.on( self.animEndEventName, onAnimationEndFn );
109					}
110					else {
111						onAnimationEndFn.call();
112					}
113
114					return false;
115
116				}
117			} );
118
119			this.$back.on( 'click.dlmenu', function( event ) {
120				
121				var $this = $( this ),
122					$submenu = $this.parents( 'ul.dl-submenu:first' ),
123					$item = $submenu.parent(),
124
125
126					$flyin = $submenu.clone().insertAfter( self.$menu ).addClass( self.options.animationClasses.out );
127
128				var onAnimationEndFn = function() {
129					self.$menu.off( self.animEndEventName ).removeClass( self.options.animationClasses.in );
130					$flyin.remove();
131				};
132
133				self.$menu.addClass( self.options.animationClasses.in );
134
135				if( self.supportAnimations ) {
136					self.$menu.on( self.animEndEventName, onAnimationEndFn );
137				}
138				else {
139					onAnimationEndFn.call();
140				}
141
142				$item.removeClass( 'dl-subviewopen' );
143				
144				var $subview = $this.parents( '.dl-subview:first' );
145				if( $subview.is( 'li' ) ) {
146					$subview.addClass( 'dl-subviewopen' );
147				}
148				$subview.removeClass( 'dl-subview' );
149
150				return false;

151
152			} );
153			
154		},
155		_closeMenu : function() {
156			var self = this,
157				onTransitionEndFn = function() {
158					self.$menu.off( self.transEndEventName );
159					self._resetMenu();
160				};
161			
162			this.$menu.removeClass( 'dl-menuopen' );
163			this.$menu.addClass( 'dl-menu-toggle' );
164			this.$trigger.removeClass( 'dl-active' );
165			
166			if( this.supportTransitions ) {
167				this.$menu.on( this.transEndEventName, onTransitionEndFn );
168			}
169			else {
170				onTransitionEndFn.call();
171			}
172
173			this.open = false;
174		},
175		_openMenu : function() {
176			this.$menu.addClass( 'dl-menuopen dl-menu-toggle' ).on( this.transEndEventName, function() {
177				$( this ).removeClass( 'dl-menu-toggle' );
178			} );
179			this.$trigger.addClass( 'dl-active' );
180			this.open = true;
181		},
182		// resets the menu to its original state (first level of options)
183		_resetMenu : function() {
184			this.$menu.removeClass( 'dl-subview' );
185			this.$menuitems.removeClass( 'dl-subview dl-subviewopen' );
186		}
187	};
188
189	var logError = function( message ) {
190		if ( window.console ) {
191			window.console.error( message );
192		}
193	};
194
195	$.fn.dlmenu = function( options ) {
196		if ( typeof options === 'string' ) {
197			var args = Array.prototype.slice.call( arguments, 1 );
198			this.each(function() {
199				var instance = $.data( this, 'dlmenu' );
200				if ( !instance ) {
201					logError( "cannot call methods on dlmenu prior to initialization; " +
202					"attempted to call method '" + options + "'" );
203					return;
204				}
205				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
206					logError( "no such method '" + options + "' for dlmenu instance" );
207					return;
208				}
209				instance[ options ].apply( instance, args );
210			});
211		} 
212		else {
213			this.each(function() {	
214				var instance = $.data( this, 'dlmenu' );
215				if ( instance ) {
216					instance._init();
217				}
218				else {
219					instance = $.data( this, 'dlmenu', new $.DLMenu( options, this ) );
220				}
221			});
222		}
223		return this;
224	};
225
226} )( jQuery, window );