Skip to content

Commit 785f069

Browse files
peachananrpeachananr
committed
Fix more
1 parent 3517b5e commit 785f069

6 files changed

+100
-6
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Once that is done, simply call the function like this:
3838

3939
````javascript
4040
$(".sidemenu").square_menu({
41-
flyDirection: "bottom", // The direction where the menu will fly from. Available options are "top", "bottom", "left" and "right". The default value is "bottom".
41+
flyDirection: "bottom", // The direction where the menu will fly from. Available options are "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" and "bottom-right". The default value is "bottom".
4242
button: "Menu", // You can define text inside the auto-generated button here. If you want to prevent the plugin from generating a menu button, change this to false. The default value is "Menu".
4343
animationStyle: "vertical", // The type of animation style you will see after it flew in. Available options are "vertical" which expands vertically and "horizontal" which expands horizontally. Vertical works best with "top" or "bottom" flyDirection whereas Horizontal works best with "left" or "right" flyDirection. The default value is "vertical".
4444
closeButton: "X" // You can define the content of the close button appears after animates are completed here. Change this to false to hide the close button. The default value is X.

‎demo/jquery.square_menu.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
$.fn.closeMenu = function() {
3636

37-
$(".sm-menu").addClass("animated")
37+
$(".sm-menu").addClass("animated").removeClass("re-rotate")
3838
$(".sm-menu .sm-close").remove()
3939
$(".sm-menu .sm-nav:first-child .nav-inner").removeClass("animated flyInLeft")
4040
$(".sm-menu .sm-nav:nth-child(2) .nav-inner").removeClass("animated flyInRight")
@@ -62,7 +62,7 @@
6262
$(".sm-menu .sm-nav").addClass("animated");
6363
$(".sm-menu .sm-nav").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
6464
if (e.originalEvent.propertyName == '-webkit-transform' || e.originalEvent.propertyName == 'transform' || e.originalEvent.propertyName == '-o-transform' || e.originalEvent.propertyName == '-moz-transform') {
65-
65+
$(".sm-menu").addClass("re-rotate")
6666
if (settings.closeButton != false) {
6767
el.prepend("<a href='#' class='sm-close'>" + settings.closeButton + "</a>")
6868

‎demo/square_menu.css

+47
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,50 @@ body.sm-activate {
2323
transition: all 0.5s ease-in-out;
2424
}
2525

26+
.sm-menu.sm-bottom-left {
27+
-webkit-transform: rotate(-135deg);
28+
-moz-transform: rotate(-135deg);
29+
-ms-transform: rotate(-135deg);
30+
-o-transform: rotate(-135deg);
31+
transform: rotate(-135deg);
32+
top: 150%;
33+
left: -150%;
34+
}
35+
36+
.sm-menu.sm-bottom-right {
37+
-webkit-transform: rotate(135deg);
38+
-moz-transform: rotate(135deg);
39+
-ms-transform: rotate(135deg);
40+
-o-transform: rotate(135deg);
41+
transform: rotate(135deg);
42+
top: 150%;
43+
left: 150%;
44+
}
45+
2646
.sm-menu.sm-top {
2747
top: -150%;
2848
}
2949

50+
.sm-menu.sm-top-left {
51+
-webkit-transform: rotate(-45deg);
52+
-moz-transform: rotate(-45deg);
53+
-ms-transform: rotate(-45deg);
54+
-o-transform: rotate(-45deg);
55+
transform: rotate(-45deg);
56+
top: -150%;
57+
left: -150%;
58+
}
59+
60+
.sm-menu.sm-top-right {
61+
-webkit-transform: rotate(45deg);
62+
-moz-transform: rotate(45deg);
63+
-ms-transform: rotate(45deg);
64+
-o-transform: rotate(45deg);
65+
transform: rotate(45deg);
66+
top: -150%;
67+
left: 150%;
68+
}
69+
3070
.sm-menu.sm-left {
3171
top: 50%;
3272
left: -150%;
@@ -37,6 +77,13 @@ body.sm-activate {
3777
left: 150%;
3878
}
3979

80+
.sm-menu.re-rotate {
81+
-webkit-transform: rotate(0);
82+
-moz-transform: rotate(0);
83+
-ms-transform: rotate(0);
84+
-o-transform: rotate(0);
85+
transform: rotate(0);
86+
}
4087

4188
.sm-menu.ff-hack {
4289
opacity: 1;

‎jquery.square_menu.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
$.fn.closeMenu = function() {
3636

37-
$(".sm-menu").addClass("animated")
37+
$(".sm-menu").addClass("animated").removeClass("re-rotate")
3838
$(".sm-menu .sm-close").remove()
3939
$(".sm-menu .sm-nav:first-child .nav-inner").removeClass("animated flyInLeft")
4040
$(".sm-menu .sm-nav:nth-child(2) .nav-inner").removeClass("animated flyInRight")
@@ -62,7 +62,7 @@
6262
$(".sm-menu .sm-nav").addClass("animated");
6363
$(".sm-menu .sm-nav").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e){
6464
if (e.originalEvent.propertyName == '-webkit-transform' || e.originalEvent.propertyName == 'transform' || e.originalEvent.propertyName == '-o-transform' || e.originalEvent.propertyName == '-moz-transform') {
65-
65+
$(".sm-menu").addClass("re-rotate")
6666
if (settings.closeButton != false) {
6767
el.prepend("<a href='#' class='sm-close'>" + settings.closeButton + "</a>")
6868

‎jquery.square_menu.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎square_menu.css

+47
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,50 @@ body.sm-activate {
2323
transition: all 0.5s ease-in-out;
2424
}
2525

26+
.sm-menu.sm-bottom-left {
27+
-webkit-transform: rotate(-135deg);
28+
-moz-transform: rotate(-135deg);
29+
-ms-transform: rotate(-135deg);
30+
-o-transform: rotate(-135deg);
31+
transform: rotate(-135deg);
32+
top: 150%;
33+
left: -150%;
34+
}
35+
36+
.sm-menu.sm-bottom-right {
37+
-webkit-transform: rotate(135deg);
38+
-moz-transform: rotate(135deg);
39+
-ms-transform: rotate(135deg);
40+
-o-transform: rotate(135deg);
41+
transform: rotate(135deg);
42+
top: 150%;
43+
left: 150%;
44+
}
45+
2646
.sm-menu.sm-top {
2747
top: -150%;
2848
}
2949

50+
.sm-menu.sm-top-left {
51+
-webkit-transform: rotate(-45deg);
52+
-moz-transform: rotate(-45deg);
53+
-ms-transform: rotate(-45deg);
54+
-o-transform: rotate(-45deg);
55+
transform: rotate(-45deg);
56+
top: -150%;
57+
left: -150%;
58+
}
59+
60+
.sm-menu.sm-top-right {
61+
-webkit-transform: rotate(45deg);
62+
-moz-transform: rotate(45deg);
63+
-ms-transform: rotate(45deg);
64+
-o-transform: rotate(45deg);
65+
transform: rotate(45deg);
66+
top: -150%;
67+
left: 150%;
68+
}
69+
3070
.sm-menu.sm-left {
3171
top: 50%;
3272
left: -150%;
@@ -37,6 +77,13 @@ body.sm-activate {
3777
left: 150%;
3878
}
3979

80+
.sm-menu.re-rotate {
81+
-webkit-transform: rotate(0);
82+
-moz-transform: rotate(0);
83+
-ms-transform: rotate(0);
84+
-o-transform: rotate(0);
85+
transform: rotate(0);
86+
}
4087

4188
.sm-menu.ff-hack {
4289
opacity: 1;

0 commit comments

Comments
 (0)