https://corona-propaganda.de/sideviewmenu.js

1/* Page Sideview Menu
2* Author: Dynamic Drive at http://www.dynamicdrive.com/
3* Visit http://www.dynamicdrive.com/ for full source code
4*/
5
6var sideviewmenu = (function(win, $){
7
8	var defaults = {
9		main_transition_duration: 0.3,
10		menu_transition: {duration: 0.4, delay: 0.4},
11		list_transition: {listclass: 'menulinks', duration: 0.5, basedelay: 0.4, delay: 0.3},
12		menusource: 'inline',
13		menuid: 'sideviewmenu',
14		onopenclose:function(state){
15			// event handler
16		}
17	}
18
19	var transform = typeof $(document.documentElement).css('perspective') != "undefined" // test for support for CSS3 transform
20	var menuloaded = false
21
22	function getajaxcontent(url, options){
23		$.ajax({
24			url: url,
25			dataType: 'html',
26			error:function(ajaxrequest){
27				alert('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
28			},
29			success:function(content){
30				menuloaded = true
31				options.menuref = $(content)
32				sideviewmenu(options)
33			}
34		})
35	}
36
37	function sideviewmenu(options){
38
39		var menusource = options.menusource || defaults.menusource
40		if (!menuloaded && menusource != 'inline'){
41			getajaxcontent(menusource, options)
42			return
43		}
44
45		var s = $.extend({}, defaults, options),
46				$bod = $(document.body),
47				$content = $('#contentwrapper')
48
49		var $menu = s.menuref || $('#' + s.menuid)
50
51		if ($content.length == 0){
52			$bod.wrapInner('<div id="contentwrapper" />')
53			$content = $('#contentwrapper')
54		}
55
56		$bod.prepend( $menu )
57		var $menubackdrop = $('<div class="backdrop" />').prependTo($menu)
58
59		function togglescrollbars(state){
60			if (state == 'open'){
61				$menu.css({overflow: 'auto'})
62				$menubackdrop.css({height: $menu.get(0).scrollHeight})
63				s.onopenclose('opened')			
64			}
65			else{
66				$content.css({height: '', overflow: ''})
67				$bod.css('overflow', 'auto')
68				$menu.css({overflow: ''})
69				s.onopenclose('closed')
70			}
71		}
72
73		if (transform){
74			$content.css({'transitionDuration': s.main_transition_duration + 's'})
75			$menu.css({transitionDuration: s.menu_transition.duration + 's', transitionDelay: s.menu_transition.delay + 's'})
76			$menu.find('.' + s.list_transition.listclass + ' li').each(function(i){ // loop through LI elements within UL menu
77				$(this).css({
78					transitionDuration: s.list_transition.duration + 's',
79					transitionDelay: s.list_transition.basedelay + s.list_transition.delay * i + 's'
80				})
81			})
82	
83			$bod.on('transitionend webkitTransitionEnd', function(e){
84				if (/transform/i.test(e.originalEvent.propertyName) && e.target.getAttribute('id') == s.menuid){ // check event fired on "transform" prop
85					if ( !$bod.hasClass('opensideviewmenu') ){ // if menu is hidden (at end of animation)
86						togglescrollbars('close')
87					}
88					else{ // if menu is visible (at end of animation)
89						togglescrollbars('open')
90					}
91				}
92			})
93		}
94		else{ // no CSS3 transform support
95			$menu.css({left: '-100%', visibility: 'visible'})
96		}
97
98
99		sideviewmenu.toggle = function(state){
100		 	$bod.css('overflow', 'hidden')
101			$content.css({height: window.innerHeight, overflow: 'hidden'})
102			var actionfunc = (state == 'open')? 'addClass' : (state == 'close')? 'removeClass' : 'toggleClass'
103			setTimeout(function(){
104				$bod[actionfunc]('opensideviewmenu')
105			}, transform? 25 : 0)
106			if (!transform) { // fall back animation
107				var leftval = (state == 'open')? 0 : (state == 'close')? '-100%' : ($bod.hasClass('opensideviewmenu'))? '-100%' : 0
108				$menu.animate({left: leftval}, s.menu_transition.duration +'ms', function(){
109					if (leftval == 0){ // if menu is visible (at end of animation)
110						togglescrollbars('open')
111					}
112					else{ // if menu is hidden (at end of animation)
113						togglescrollbars('close')
114					}
115				})
116			}
117		}
118
119		$menu.add($content).on('click', function(){ // close menu when clicking on menu or content (main BODY)
120			if ($bod.hasClass('opensideviewmenu')){
121				sideviewmenu.toggle('close')
122			}
123		})
124		
125	} // end sideviewmenu function
126
127
128	return sideviewmenu
129
130}) (window, jQuery);
131
132
133