https://ideas.repec.org/css/pushy.js

1
2
3/*! Pushy - v0.9.2 - 2014-9-13
4* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
5* https://github.com/christophery/pushy/
6* by Christopher Yee */
7
8$(function() {
9	var pushy = $('.pushy'), //menu css class
10		body = $('body'),
11		container = $('#main'), //container css class
12		push = $('.push'), //css class to add pushy capability
13		siteOverlay = $('.site-overlay'), //site overlay
14		pushyClass = "pushy-left pushy-open", //menu position & menu open class
15		pushyActiveClass = "pushy-active", //css class to toggle site overlay
16		containerClass = "container-push", //container open class
17		pushClass = "push-push", //css class to add pushy capability
18		menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
19		menuSpeed = 200, //jQuery fallback menu speed
20		menuWidth = pushy.width() + "px"; //jQuery fallback menu width
21
22	function togglePushy(){
23		body.toggleClass(pushyActiveClass); //toggle site overlay
24		pushy.toggleClass(pushyClass);
25		container.toggleClass(containerClass);
26		push.toggleClass(pushClass); //css class to add pushy capability
27	}
28
29	function openPushyFallback(){
30		body.addClass(pushyActiveClass);
31		pushy.animate({left: "0px"}, menuSpeed);
32		container.animate({left: menuWidth}, menuSpeed);
33		push.animate({left: menuWidth}, menuSpeed); //css class to add pushy capability
34	}
35
36	function closePushyFallback(){
37		body.removeClass(pushyActiveClass);
38		pushy.animate({left: "-" + menuWidth}, menuSpeed);
39		container.animate({left: "0px"}, menuSpeed);
40		push.animate({left: "0px"}, menuSpeed); //css class to add pushy capability
41	}
42
43	//checks if 3d transforms are supported removing the modernizr dependency
44	cssTransforms3d = (function csstransforms3d(){
45		var el = document.createElement('p'),
46		supported = false,
47		transforms = {
48		    'webkitTransform':'-webkit-transform',
49		    'OTransform':'-o-transform',
50		    'msTransform':'-ms-transform',
51		    'MozTransform':'-moz-transform',
52		    'transform':'transform'
53		};
54
55		// Add it to the body to get the computed style
56		document.body.insertBefore(el, null);
57
58		for(var t in transforms){
59		    if( el.style[t] !== undefined ){
60		        el.style[t] = 'translate3d(1px,1px,1px)';
61		        supported = window.getComputedStyle(el).getPropertyValue(transforms[t]);
62		    }
63		}
64
65		document.body.removeChild(el);
66
67		return (supported !== undefined && supported.length > 0 && supported !== "none");
68	})();
69
70	if(cssTransforms3d){
71		//toggle menu
72		menuBtn.click(function() {
73			togglePushy();
74		});
75		//close menu when clicking site overlay
76		siteOverlay.click(function(){ 
77			togglePushy();
78		});
79	}else{
80		//jQuery fallback
81		//pushy.css({left: "-" + menuWidth}); //hide menu by default
82		container.css({"overflow-x": "hidden"}); //fixes IE scrollbar issue
83
84		//keep track of menu state (open/close)
85		var state = false;
86
87		//toggle menu
88		menuBtn.click(function() {
89			if (state) {
90				openPushyFallback();
91				state = false;
92			} else {
93				closePushyFallback();
94				state = true;
95			}
96		});
97
98		//close menu when clicking site overlay
99		siteOverlay.click(function(){ 
100			if (state) {
101				openPushyFallback();
102				state = false;
103			} else {
104				closePushyFallback();
105				state = true;
106			}
107		});
108	}
109});
110