summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAaron Dudenhofer2012-06-29 20:46:33 (GMT)
committer Aaron Dudenhofer2012-06-29 20:46:33 (GMT)
commit3fb8cc4f7df8dd102d2bdb1d3ea86b6927247c35 (patch)
tree3f28458b0a53ce7b39ea9ef28a0d0916446131cb
parent6d28431ff623d149c80b7d119e7a6f3cd567ca12 (diff)
adding styling for the mobile menu slidedown option7.x-1.2
-rwxr-xr-xcss/colors.css6
-rwxr-xr-xcss/corners.css7
-rw-r--r--css/images/menu-toggle.pngbin0 -> 2213 bytes
-rwxr-xr-xcss/responsive/smartphone.css61
-rwxr-xr-xjs/conditional/mobilemenu.js6
-rwxr-xr-xsass/corners.sass3
-rwxr-xr-xsass/responsive/smartphone.sass27
7 files changed, 60 insertions, 50 deletions
diff --git a/css/colors.css b/css/colors.css
index 22ec954..c90b43e 100755
--- a/css/colors.css
+++ b/css/colors.css
@@ -44,7 +44,8 @@ body.format-framed {
.format-float #content-wrapper {
border-bottom: 1px solid #000000;
}
-#nav-wrapper nav ul.menu li a {
+#nav-wrapper nav ul.menu li a,
+.menu-slide .mobile-menu #menu-toggle {
border-left: 1px solid #414044;
border-right: 1px solid #000000;
color: #efefef;
@@ -53,7 +54,8 @@ body.format-framed {
.region-sidebar-first ul.menu li a:hover,
.region-sidebar-first ul.menu li.collapsed a:hover,
.region-sidebar-second ul.menu li a:hover,
-.region-sidebar-second ul.menu li.collapsed a:hover {
+.region-sidebar-second ul.menu li.collapsed a:hover,
+.menu-slide .mobile-menu a:hover {
background-color: #2aace2;
color: #333333;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2aace2), color-stop(100%, #44c8f5));
diff --git a/css/corners.css b/css/corners.css
index 6849deb..9af2c3b 100755
--- a/css/corners.css
+++ b/css/corners.css
@@ -128,8 +128,7 @@ ul.primary li.active:first-child a {
/* Round the top corners */
/* line 57, ../sass/corners.sass */
-body.format-float #nav-wrapper,
-.menu-slide .mobile-menu a {
+body.format-float #nav-wrapper {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-o-border-top-left-radius: 5px;
@@ -145,7 +144,7 @@ body.format-float #nav-wrapper,
}
/* Round the bottom corners. */
-/* line 62, ../sass/corners.sass */
+/* line 61, ../sass/corners.sass */
#toggle,
body.format-float #content-wrapper {
-moz-border-radius-bottomleft: 5px;
@@ -163,7 +162,7 @@ body.format-float #content-wrapper {
}
/* REMOVE ROUNDED CORNERS */
-/* line 67, ../sass/corners.sass */
+/* line 66, ../sass/corners.sass */
.checkout-buttons .checkout-cancel,
.checkout-buttons .checkout-back,
.checkout-buttons .checkout-cancel:hover,
diff --git a/css/images/menu-toggle.png b/css/images/menu-toggle.png
new file mode 100644
index 0000000..9dfc620
--- /dev/null
+++ b/css/images/menu-toggle.png
Binary files differ
diff --git a/css/responsive/smartphone.css b/css/responsive/smartphone.css
index 4e46f2b..a1e5a26 100755
--- a/css/responsive/smartphone.css
+++ b/css/responsive/smartphone.css
@@ -186,84 +186,89 @@
}
/* line 121, ../../sass/responsive/smartphone.sass */
- .media-tablet #nav-wrapper nav a.cart-link {
- display: block;
- }
-
- /* line 123, ../../sass/responsive/smartphone.sass */
- .page-cart #nav-wrapper nav a.cart-link {
- display: none;
- }
-
- /* line 125, ../../sass/responsive/smartphone.sass */
.media-tablet #views-form-commerce-cart-form-default #edit-actions #edit-checkout {
font-size: 1.5em;
}
}
@media only screen and (max-width:768px) {
- /* line 130, ../../sass/responsive/smartphone.sass */
+ /* line 126, ../../sass/responsive/smartphone.sass */
#secondary-content-wrapper .block-content {
padding: 5px 0;
font-size: 1.4em;
}
- /* line 133, ../../sass/responsive/smartphone.sass */
+ /* line 129, ../../sass/responsive/smartphone.sass */
#secondary-content-wrapper .block-content ul {
display: none;
}
- /* line 135, ../../sass/responsive/smartphone.sass */
+ /* line 131, ../../sass/responsive/smartphone.sass */
#views-form-commerce-cart-form-default #edit-actions {
width: 60% !important;
}
- /* line 137, ../../sass/responsive/smartphone.sass */
+ /* line 133, ../../sass/responsive/smartphone.sass */
#primary-menu-bar nav ul.menu li {
width: 100%;
font-size: 1.1em;
}
- /* line 140, ../../sass/responsive/smartphone.sass */
+ /* line 136, ../../sass/responsive/smartphone.sass */
#primary-menu-bar nav ul.menu li a {
width: 100%;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #cccccc;
}
- /* line 144, ../../sass/responsive/smartphone.sass */
+ /* line 140, ../../sass/responsive/smartphone.sass */
.mobile-menu {
display: block !important;
margin: 0;
- padding: 0;
+ padding: 1px;
-moz-box-shadow: 0 0 0 transparent;
-webkit-box-shadow: 0 0 0 transparent;
-o-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
}
- /* line 151, ../../sass/responsive/smartphone.sass */
+ /* line 147, ../../sass/responsive/smartphone.sass */
.menu-slide #primary-menu-bar,
.menu-jump #primary-menu-bar {
position: relative;
}
- /* line 153, ../../sass/responsive/smartphone.sass */
+ /* line 149, ../../sass/responsive/smartphone.sass */
.menu-slide #primary-menu-bar nav ul.menu,
.menu-jump #primary-menu-bar nav ul.menu {
display: none;
}
- /* line 155, ../../sass/responsive/smartphone.sass */
+ /* line 151, ../../sass/responsive/smartphone.sass */
.menu-slide .mobile-menu {
position: relative;
+ width: 75px;
+ margin: 0 auto;
}
- /* line 157, ../../sass/responsive/smartphone.sass */
- .menu-slide .mobile-menu a {
- background: #eeeeee;
- padding: 5px;
- position: absolute;
- bottom: 100%;
- right: 10px;
+ /* line 155, ../../sass/responsive/smartphone.sass */
+ .menu-slide .mobile-menu #menu-toggle {
+ padding: 8px 10px 8px 35px;
text-decoration: none;
- color: #333333;
font-weight: bold;
font-size: 1.2em;
+ float: left;
+ min-width: 75px;
+ text-align: center;
+ background: transparent url("../images/menu-toggle.png") no-repeat 1px 1px;
+ }
+ /* line 164, ../../sass/responsive/smartphone.sass */
+ .menu-slide .mobile-menu #menu-toggle.menu-down {
+ background-position: 1px -31px;
+ }
+
+ /* line 166, ../../sass/responsive/smartphone.sass */
+ .media-tablet #nav-wrapper nav a.cart-link {
+ display: block;
+ }
+
+ /* line 168, ../../sass/responsive/smartphone.sass */
+ .page-cart #nav-wrapper nav a.cart-link {
+ display: none;
}
}
diff --git a/js/conditional/mobilemenu.js b/js/conditional/mobilemenu.js
index c362388..5d0222d 100755
--- a/js/conditional/mobilemenu.js
+++ b/js/conditional/mobilemenu.js
@@ -7,15 +7,17 @@
$(document).ready(function(){
header = $("#primary-menu-bar");
menu = $("#primary-menu-bar nav ul");
- menuButton = $("<div class='mobile-menu'><a id='menu-toggle' href='#'>Menu</a></div>");
- menuButton.click(showMenu);
+ menuButton = $("<div class='mobile-menu clearfix'><a id='menu-toggle' href='#'>Menu</a></div>");
header.prepend(menuButton);
+ menuButton.click(showMenu);
})
function showMenu (event) {
if (menu.is(":visible"))
+ $('.mobile-menu a').removeClass('menu-down'),
menu.slideUp({complete:function(){$(this).css('display','')}});
else
+ $('.mobile-menu a').addClass('menu-down'),
menu.slideDown();
}
diff --git a/sass/corners.sass b/sass/corners.sass
index 3f5d923..eb23d1f 100755
--- a/sass/corners.sass
+++ b/sass/corners.sass
@@ -54,8 +54,7 @@ ul.primary li.active:first-child a
@include border-left-radius(4px)
/* Round the top corners */
-body.format-float #nav-wrapper,
-.menu-slide .mobile-menu a
+body.format-float #nav-wrapper
@include border-top-radius(5px)
/* Round the bottom corners. */
diff --git a/sass/responsive/smartphone.sass b/sass/responsive/smartphone.sass
index b2e20e8..6ca3f5b 100755
--- a/sass/responsive/smartphone.sass
+++ b/sass/responsive/smartphone.sass
@@ -118,10 +118,6 @@
float: none
width: 98%
margin-bottom: 10px
- .media-tablet #nav-wrapper nav a.cart-link
- display: block
- .page-cart #nav-wrapper nav a.cart-link
- display: none
.media-tablet #views-form-commerce-cart-form-default #edit-actions #edit-checkout
font-size: 1.5em
@@ -144,7 +140,7 @@
.mobile-menu
display: block!important
margin: 0
- padding: 0
+ padding: 1px
@include box-shadow(0 0 0 transparent)
.menu-slide,
.menu-jump
@@ -154,13 +150,20 @@
display: none
.menu-slide .mobile-menu
position: relative
- a
- background: #eee
- padding: 5px
- position: absolute
- bottom: 100%
- right: 10px
+ width: 75px
+ margin: 0 auto
+ #menu-toggle
+ padding: 8px 10px 8px 35px
text-decoration: none
- color: #333
font-weight: bold
font-size: 1.2em
+ float: left
+ min-width: 75px
+ text-align: center
+ background: transparent url("../images/menu-toggle.png") no-repeat 1px 1px
+ #menu-toggle.menu-down
+ background-position: 1px -31px
+ .media-tablet #nav-wrapper nav a.cart-link
+ display: block
+ .page-cart #nav-wrapper nav a.cart-link
+ display: none