eb56e5f2
 Administrator
first commit
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
/*! Pushy - v1.0.0 - 2016-3-1
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */
(function ($) {
var pushy = $('.pushy'), //menu css class
body = $('body'),
container = $('#container'), //container css class
push = $('.push'), //css class to add pushy capability
pushyLeft = 'pushy-left', //css class for left menu position
pushyOpenLeft = 'pushy-open-left', //css class when menu is open (left position)
pushyOpenRight = 'pushy-open-right', //css class when menu is open (right position)
siteOverlay = $('.site-overlay'), //site overlay
menuBtn = $('.menu-btn, .pushy-link'), //css classes to toggle the menu
menuSpeed = 200, //jQuery fallback menu speed
menuWidth = pushy.width() + 'px', //jQuery fallback menu width
submenuClass = '.pushy-submenu',
submenuOpenClass = 'pushy-submenu-open',
submenuClosedClass = 'pushy-submenu-closed',
submenu = $(submenuClass);
function togglePushy(){
//add class to body based on menu position
if( pushy.hasClass(pushyLeft) ){
body.toggleClass(pushyOpenLeft);
}else{
body.toggleClass(pushyOpenRight);
}
}
function openPushyFallback(){
//animate menu position based on CSS class
if( pushy.hasClass(pushyLeft) ){
body.addClass(pushyOpenLeft);
pushy.animate({left: "0px"}, menuSpeed);
container.animate({left: menuWidth}, menuSpeed);
//css class to add pushy capability
push.animate({left: menuWidth}, menuSpeed);
}else{
body.addClass(pushyOpenRight);
pushy.animate({right: '0px'}, menuSpeed);
container.animate({right: menuWidth}, menuSpeed);
push.animate({right: menuWidth}, menuSpeed);
}
}
function closePushyFallback(){
//animate menu position based on CSS class
if( pushy.hasClass(pushyLeft) ){
body.removeClass(pushyOpenLeft);
pushy.animate({left: "-" + menuWidth}, menuSpeed);
container.animate({left: "0px"}, menuSpeed);
//css class to add pushy capability
push.animate({left: "0px"}, menuSpeed);
}else{
body.removeClass(pushyOpenRight);
pushy.animate({right: "-" + menuWidth}, menuSpeed);
container.animate({right: "0px"}, menuSpeed);
push.animate({right: "0px"}, menuSpeed);
}
}
function toggleSubmenu(){
//hide submenu by default
$(submenuClass).addClass(submenuClosedClass);
$(submenuClass).on('click', function(){
var selected = $(this);
if( selected.hasClass(submenuClosedClass) ) {
//hide opened submenus
$(submenuClass).addClass(submenuClosedClass).removeClass(submenuOpenClass);
//show submenu
selected.removeClass(submenuClosedClass).addClass(submenuOpenClass);
}else{
//hide submenu
selected.addClass(submenuClosedClass).removeClass(submenuOpenClass);
}
});
}
function toggleSubmenuFallback(){
//hide submenu by default
$(submenuClass).addClass(submenuClosedClass);
submenu.children('a').on('click', function(event){
event.preventDefault();
$(this).toggleClass(submenuOpenClass)
.next('.pushy-submenu ul').slideToggle(200)
.end().parent(submenuClass)
.siblings(submenuClass).children('a')
.removeClass(submenuOpenClass)
.next('.pushy-submenu ul').slideUp(200);
});
}
//checks if 3d transforms are supported removing the modernizr dependency
var cssTransforms3d = (function csstransforms3d(){
var el = document.createElement('p'),
supported = false,
transforms = {
'webkitTransform':'-webkit-transform',
'OTransform':'-o-transform',
'msTransform':'-ms-transform',
'MozTransform':'-moz-transform',
'transform':'transform'
};
// Add it to the body to get the computed style
document.body.insertBefore(el, null);
for(var t in transforms){
if( el.style[t] !== undefined ){
el.style[t] = 'translate3d(1px,1px,1px)';
supported = window.getComputedStyle(el).getPropertyValue(transforms[t]);
}
}
document.body.removeChild(el);
return (supported !== undefined && supported.length > 0 && supported !== "none");
})();
if(cssTransforms3d){
//make menu visible
pushy.css({'visibility': 'visible'});
//toggle submenu
toggleSubmenu();
//toggle menu
menuBtn.on('click', function(){
menuBtn.toggleClass('open');
togglePushy();
});
//close menu when clicking site overlay
siteOverlay.on('click', function(){
menuBtn.toggleClass('open');
togglePushy();
});
}else{
//add css class to body
body.addClass('no-csstransforms3d');
//hide menu by default
if( pushy.hasClass(pushyLeft) ){
pushy.css({left: "-" + menuWidth});
}else{
pushy.css({right: "-" + menuWidth});
}
//make menu visible
pushy.css({'visibility': 'visible'});
//fixes IE scrollbar issue
container.css({"overflow-x": "hidden"});
//keep track of menu state (open/close)
var opened = false;
//toggle submenu
toggleSubmenuFallback();
//toggle menu
menuBtn.on('click', function(){
if (opened) {
closePushyFallback();
opened = false;
} else {
openPushyFallback();
opened = true;
}
});
//close menu when clicking site overlay
siteOverlay.on('click', function(){
if (opened) {
closePushyFallback();
opened = false;
} else {
openPushyFallback();
opened = true;
}
});
}
}(jQuery));
|
