Skip to content

Commit 31e6dfe

Browse files
peachananrpeachananr
committed
Initial version
1 parent dcd1afe commit 31e6dfe

File tree

6 files changed

+1026
-0
lines changed

6 files changed

+1026
-0
lines changed

‎demo/jquery.square_menu.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/* ===========================================================
2+
* jquery-square_menu.js v1
3+
* ===========================================================
4+
* Copyright 2013 Pete Rojwongsuriya.
5+
* http://www.thepetedesign.com
6+
*
7+
* Recreate a full page animated menu like you see
8+
* Square Website using jQuery and CSS3
9+
*
10+
* https://github.com/peachananr/square_menu
11+
*
12+
* ========================================================== */
13+
14+
!function($){
15+
16+
var defaults = {
17+
flyDirection: "bottom",
18+
button: "Menu",
19+
animationStyle: "vertical",
20+
closeButton: "X"
21+
};
22+
23+
24+
$.fn.square_menu = function(options){
25+
var settings = $.extend({}, defaults, options),
26+
el = $(this);
27+
28+
$("body").addClass("fsm-body")
29+
30+
el.addClass("sm-menu sm-"+settings.flyDirection+ " sm-" + settings.animationStyle)
31+
el.wrapInner("<div class='sm-wrapper'></div>")
32+
33+
el.find("nav").addClass("sm-nav").wrapInner("<div class='nav-inner'></div>");
34+
35+
$.fn.closeMenu = function() {
36+
37+
$(".sm-menu").addClass("animated")
38+
$(".sm-menu .sm-close").remove()
39+
$(".sm-menu .sm-nav:first-child .nav-inner").removeClass("animated flyInLeft")
40+
$(".sm-menu .sm-nav:nth-child(2) .nav-inner").removeClass("animated flyInRight")
41+
42+
if ($("body").hasClass("sm-activate")) {
43+
$(".sm-menu").find(".sm-nav").removeClass("animated")
44+
$(".sm-menu").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
45+
$("body").removeClass("sm-activate")
46+
});
47+
}
48+
}
49+
50+
$.fn.openMenu = function() {
51+
52+
$(".sm-menu").addClass("animated")
53+
54+
if (!$("body").hasClass("sm-activate")) {
55+
if ($(".sm-overlay").length < 1) $("<div class='sm-overlay'></div>").hide().prependTo("body")
56+
$(".sm-overlay").fadeIn("fast", function() {
57+
$("body").addClass("sm-activate")
58+
$("div.sidemenu.sm-menu.sm-bottom.sm-vertical.animated").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
59+
console.log(e.originalEvent)
60+
if (e.originalEvent.propertyName == 'top' || e.originalEvent.propertyName == 'left') {
61+
$(".sm-menu .sm-nav").addClass("animated");
62+
$(".sm-menu .sm-nav").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
63+
if (e.originalEvent.propertyName == '-webkit-transform' || e.originalEvent.propertyName == 'transform' || e.originalEvent.propertyName == '-o-transform' || e.originalEvent.propertyName == '-moz-transform') {
64+
65+
if (settings.closeButton != false) {
66+
el.prepend("<a href='#' class='sm-close'>" + settings.closeButton + "</a>")
67+
68+
$(".sm-close").click(function() {
69+
el.closeMenu();
70+
return false;
71+
});
72+
}
73+
74+
$(".sm-menu .sm-nav:first-child .nav-inner").addClass("animated flyInLeft")
75+
$(".sm-menu .sm-nav:nth-child(2) .nav-inner").addClass("animated flyInRight")
76+
$(".sm-overlay:not(.clicked)").addClass("clicked").click(function() {
77+
el.closeMenu();
78+
});
79+
}
80+
});
81+
}
82+
});
83+
});
84+
} else {
85+
el.closeMenu();
86+
}
87+
}
88+
89+
if (settings.button != false) {
90+
$("<a href='#' class='sm-button'>" + settings.button + "</a>").insertAfter(el)
91+
}
92+
93+
94+
$(".sm-button").click(function() {
95+
el.openMenu();
96+
return false;
97+
});
98+
}
99+
}(window.jQuery);
100+

‎demo/square_menu.css

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
body.sm-activate {
2+
overflow: hidden;
3+
}
4+
5+
.sm-menu {
6+
position: fixed;
7+
visibility: hidden;
8+
opacity: 0;
9+
width: 1024px;
10+
height: 600px;
11+
left: 50%;
12+
top: 150%;
13+
margin-left: -512px;
14+
margin-top: -300px;
15+
z-index: 101;
16+
}
17+
18+
19+
.sm-menu.animated {
20+
-webkit-transition: all 0.5s ease-in-out;
21+
-moz-transition: all 0.5s ease-in-out;
22+
-o-transition: all 0.5s ease-in-out;
23+
transition: all 0.5s ease-in-out;
24+
}
25+
26+
.sm-menu.sm-top {
27+
top: -150%;
28+
}
29+
30+
.sm-menu.sm-left {
31+
top: 50%;
32+
left: -150%;
33+
}
34+
35+
.sm-menu.sm-right {
36+
top: 50%;
37+
left: 150%;
38+
}
39+
40+
41+
.sm-activate .sm-menu {
42+
opacity: 1;
43+
visibility: visible;
44+
top: 50%;
45+
left: 50%;
46+
}
47+
48+
.sm-menu .sm-nav {
49+
-webkit-transform: translate3d(50%, 0, 0) scale(0.002, 1);
50+
-moz-transform: translate3d(50%, 0, 0) scale(0.002, 1);
51+
-ms-transform: translate3d(50%, 0, 0) scale(0.002, 1);
52+
-o-transform: translate3d(50%, 0, 0) scale(0.002, 1);
53+
transform: translate3d(50%, 0, 0);
54+
-webkit-transition: all 0.5s ease-in-out;
55+
-moz-transition: all 0.5s ease-in-out;
56+
-o-transition: all 0.5s ease-in-out;
57+
transition: all 0.5s ease-in-out;
58+
width: 50%;
59+
height: 100%;
60+
position: absolute;
61+
top: 0;
62+
background: #85B4CC;
63+
}
64+
65+
66+
.sm-menu.sm-horizontal .sm-nav {
67+
-webkit-transform: translate3d(25%, 0, 0) scale(0.5, 0.002);
68+
-moz-transform: translate3d(25%, 0, 0) scale(0.5, 0.002);
69+
-ms-transform: translate3d(25%, 0, 0) scale(0.5, 0.002);
70+
-o-transform: translate3d(25%, 0, 0) scale(0.5, 0.002);
71+
}
72+
73+
.sm-menu.sm-horizontal .sm-nav:nth-child(2) {
74+
-webkit-transform: translate3d(-25%, 0, 0) scaleX(0.5) scaleY(0.002);
75+
-moz-transform: translate3d(-25%, 0, 0) scaleX(0.5) scaleY(0.002);
76+
-ms-transform: translate3d(-25%, 0, 0) scaleX(0.5) scaleY(0.002);
77+
-o-transform: translate3d(-25%, 0, 0) scaleX(0.5) scaleY(0.002);
78+
transform: translate3d(-25%, 0, 0) scaleX(0.5) scaleY(0.002);
79+
right: 0;
80+
}
81+
82+
.sm-menu .sm-nav .nav-inner{
83+
display: none;
84+
-webkit-animation-duration: 1s;
85+
-moz-animation-duration: 1s;
86+
-o-animation-duration: 1s;
87+
animation-duration: 1s;
88+
-webkit-animation-fill-mode: both;
89+
-moz-animation-fill-mode: both;
90+
-o-animation-fill-mode: both;
91+
animation-fill-mode: both;
92+
vertical-align: middle;
93+
white-space: normal;
94+
text-align: left;
95+
}
96+
97+
.sm-menu .sm-nav .nav-inner.animated{
98+
display: inline-block;
99+
}
100+
101+
.sm-menu .sm-nav:nth-child(2) {
102+
-webkit-transform: translate3d(-50%, 0, 0) scaleX(0.002);
103+
-moz-transform: translate3d(-50%, 0, 0) scaleX(0.002);
104+
-ms-transform: translate3d(-50%, 0, 0) scaleX(0.002);
105+
-o-transform: translate3d(-50%, 0, 0) scaleX(0.002);
106+
transform: translate3d(-50%, 0, 0) scaleX(0.002);
107+
right: 0;
108+
}
109+
110+
.sm-menu .sm-nav.animated, .sm-menu.sm-horizontal .sm-nav.animated {
111+
-webkit-transform: scale(1, 1);
112+
-moz-transform: scale(1, 1);
113+
-ms-transform: scale(1, 1);
114+
-o-transform: scale(1, 1);
115+
transform: scale(1, 1);
116+
opacity: 1;
117+
}
118+
119+
.sm-menu .sm-nav:after {
120+
content: "";
121+
position: relative;
122+
height: 100%;
123+
display: inline-block;
124+
vertical-align: middle;
125+
-webkit-box-sizing: border-box;
126+
-moz-box-sizing: border-box;
127+
box-sizing: border-box;
128+
display: inline-block;
129+
}
130+
131+
.sm-menu .sm-close {
132+
position: absolute;
133+
top: 0;
134+
right: 0;
135+
z-index: 100;
136+
padding: 10px 15px;
137+
font-size: 30px;
138+
font-weight: 100;
139+
line-height: 100%;
140+
}
141+
142+
.sm-menu .sm-close:hover {
143+
color: black;
144+
}
145+
146+
.sm-menu .sm-nav .nav-inner > a{
147+
font-size: 36px;
148+
line-height: 40px;
149+
margin-bottom: 32px;
150+
font-weight: 300;
151+
display: block;
152+
color: white;
153+
}
154+
.sm-menu .sm-nav .nav-inner > a:hover{
155+
color: #2E3B4E;
156+
}
157+
158+
.sm-menu .sm-close {
159+
color: white;
160+
}
161+
162+
.sm-overlay {
163+
cursor: pointer;
164+
height: 100%;
165+
width: 100%;
166+
background: #2E3B4E;
167+
opacity: 0;
168+
position: fixed;
169+
left: 0;
170+
right: 0;
171+
top: 0;
172+
z-index: 100;
173+
overflow: hidden;
174+
visibility: hidden;
175+
-webkit-transition: all 0.5s ease-in-out;
176+
-moz-transition: all 0.5s ease-in-out;
177+
-o-transition: all 0.5s ease-in-out;
178+
transition: all 0.5s ease-in-out;
179+
}
180+
181+
body .sm-button {
182+
position: fixed;
183+
top: 20px;
184+
right: 20px;
185+
color: white;
186+
font-weight: bold;
187+
padding: 2px 5px;
188+
z-index: 102;
189+
}
190+
191+
body .sm-button:hover {
192+
border-bottom: 2px solid white;
193+
color: white;
194+
}
195+
196+
body.sm-activate .sm-overlay {
197+
opacity: 1;
198+
visibility: visible;
199+
}
200+
201+
@-webkit-keyframes flyInLeft {
202+
0% {
203+
opacity: 0;
204+
-webkit-transform: translateX(-20px);
205+
transform: translateX(-20px);
206+
}
207+
208+
100% {
209+
opacity: 1;
210+
-webkit-transform: translateX(0);
211+
transform: translateX(0);
212+
}
213+
}
214+
215+
@keyframes flyInLeft {
216+
0% {
217+
opacity: 0;
218+
-webkit-transform: translateX(-20px);
219+
-ms-transform: translateX(-20px);
220+
transform: translateX(-20px);
221+
}
222+
223+
100% {
224+
opacity: 1;
225+
-webkit-transform: translateX(0);
226+
-ms-transform: translateX(0);
227+
transform: translateX(0);
228+
}
229+
}
230+
231+
@-webkit-keyframes flyInRight {
232+
0% {
233+
opacity: 0;
234+
-webkit-transform: translateX(20px);
235+
transform: translateX(20px);
236+
}
237+
238+
100% {
239+
opacity: 1;
240+
-webkit-transform: translateX(0);
241+
transform: translateX(0);
242+
}
243+
}
244+
245+
@keyframes flyInRight {
246+
0% {
247+
opacity: 0;
248+
-webkit-transform: translateX(20px);
249+
-ms-transform: translateX(20px);
250+
transform: translateX(20px);
251+
}
252+
253+
100% {
254+
opacity: 1;
255+
-webkit-transform: translateX(0);
256+
-ms-transform: translateX(0);
257+
transform: translateX(0);
258+
}
259+
}
260+
261+
.flyInRight {
262+
-webkit-animation-name: flyInRight;
263+
animation-name: flyInRight;
264+
}
265+
266+
267+
.flyInLeft {
268+
-webkit-animation-name: flyInLeft;
269+
animation-name: flyInLeft;
270+
}

0 commit comments

Comments
 (0)