Permalink
Browse files

Responsive menu JavaScript.

  • Loading branch information...
1 parent 9e07ae6 commit 3ffcc867ebb906606f02bbbad0eef55ae48578b3 @gauthierm gauthierm committed Jun 25, 2012
@@ -18,7 +18,7 @@
{% block site_header_nav %}
<nav id="nav-main" role="navigation">
- <a class="toggle" href="#nav-main-menu">{{_('Menu')}}</a>
+ <span class="toggle" role="button" aria-controls="nav-main-menu" tabindex="0">{{_('Menu')}}</span>
<ul id="nav-main-menu" role="menubar">
<li class="first" id="nav-main-features"><a href="/en-US/firefox/features/" tabindex="0" aria-owns="nav-main-features-submenu" aria-haspopup="true">Desktop</a>
<ul aria-expanded="false" id="nav-main-features-submenu" class="submenu">
@@ -81,7 +81,7 @@
{% endblock %}
{% block site_js %}
- {{ js('firefox') }}
+ {{ js('firefox-resp') }}
{% endblock %}
{% block webtrends %}
@@ -39,7 +39,7 @@
position: absolute;
z-index: 100;
left: -999em;
- top: 44px;
+ top: 43px;
opacity: 0;
width: 190px;
text-shadow: 1px 1px 0 #fff, 0 0 5px #fff;
@@ -106,7 +106,6 @@
}
}
-/* }}} */
/* {{{ Dark Background Header */
.darkbg #nav-main ul li {
@@ -137,9 +136,11 @@
}
+/* }}} */
+
/* Mobile Layout: 320px */
@media only screen and (max-width: @breakTablet) {
-
+
#nav-main-menu {
margin: 15px 0 0 -10px;
@@ -151,17 +152,20 @@
#nav-main-menu .submenu,
.js #nav-main li.hover .submenu {
- left: 60px;
- top: auto;
+ left: -999em;
margin-top: -8px;
- display: none;
background: #fff;
- border-radius: 10px;
- box-shadow: 0 2px 3px rgba(0,0,0,.35);
+ .border-radius(10px);
+ .box-shadow(0 2px 3px rgba(0,0,0,.35));
opacity: 1;
padding: 0;
}
-
+
+ .js #nav-main li .submenu {
+ xleft: 80px;
+ xtop: 0px;
+ }
+
#nav-main-menu .submenu a,
#nav-main-menu .submenu a:link,
#nav-main-menu .submenu a:visited {
@@ -170,6 +174,5 @@
transition: none 0s;
}
-
}
@@ -846,6 +846,7 @@ nav.menu-bar {
background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAbCAYAAABvCO8sAAABU0lEQVRIx82Wz0rDQBCHd5MhwUshDZFCscSUSHLKoVCt+NaC+AAiXpNLCoEeAr0Y0oMgMf87g/QBatnBhT3sYfnYmd9+u9J13dfpdPqk6/ooFI6+7+XhcHiDxWKxCYLgmwO43W43MJlMBtu2OymlSp4Yx1EQCzRNG2kKxYMORBwgOC6UA08HBaytGIZBcPSQWICwNMuyO8MwlAKbppHEktjMe1xfM5X0k4Bn7fB9/88ppdbBuRvrur4srZ7nveA9fOQITVmW74BqW4dh+IWhGRSHRkvTdE2m6WazWc1hmv1+bwCVUnU5T4M4QJbBOXAAiQVt27KZhljQdV2GzbzlCA2x/r9p8LHmNU1VVZcFZ7lcPjuO88ARmqIoPgDVtoqiqOR4nuI4XoFlWe18Pv/hME2e51f8f5rxN6YsaiMWXXzJZRpiEXCXJMmNaZpKgfhwE3B3BGJ212JCzaPDAAAAAElFTkSuQmCC);
text-indent: -999em;
overflow: hidden;
+ cursor: pointer;
}
#nav-main-menu li {
@@ -860,10 +861,14 @@ nav.menu-bar {
}
#nav-main-menu a {
+ cursor: pointer;
display: block;
text-transform: none;
padding: 12px 35px 12px 10px;
margin: 0 -10px;
+ }
+
+ #nav-main-menu a.submenu-item {
background: 94% 50% no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=);
}
@@ -876,16 +881,29 @@ nav.menu-bar {
background-color: #247ac1;
background-position: 94% 50%;
background-repeat: no-repeat;
+ background-image: -moz-linear-gradient(#43a6e2, #247ac1);
+ background-image: -ms-linear-gradient(#43a6e2, #247ac1);
+ background-image: -o-linear-gradient(#43a6e2, #247ac1);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43a6e2), color-stop(100%,#247ac1));
+ background-image: -webkit-linear-gradient(#43a6e2, #247ac1);
+ background-image: linear-gradient(#43a6e2, #247ac1);
+ }
+
+ #nav-main-menu a.submenu-item:hover,
+ #nav-main-menu a.submenu-item:focus,
+ #nav-main-menu a.submenu-item:active {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -moz-linear-gradient(#43a6e2, #247ac1);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -ms-linear-gradient(#43a6e2, #247ac1);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -o-linear-gradient(#43a6e2, #247ac1);
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43a6e2), color-stop(100%,#247ac1));
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), -webkit-linear-gradient(#43a6e2, #247ac1);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAQAAABHeoekAAAA4ElEQVQYV2NggANBKdHNwjMEWBlwAek55ostFkpPFsSlZGqN3dzoJts50pNwKPmvsnqC+9S4RrvZeJV4TI1rsJslMxGnkm3dqfXZlfYIJcLLFfep7ILCndobHGdmVTbm5lY4zJKCONd4Q0B3dAsMxjanV1fnt2c152RU62yQNQMqSJsXvCBqFgzGTS/qqCjuyKrPC+koX/BfAWSr+/80ZNjamlPRmBfWVjP3vyMWR0qmOM0oKA/HJS2aYb4ouTasHZd0ksmSlFqcuhkY7Ka4Tg7srJmDQ5qB4U1I8tJGDGkAk1hsjRhvED8AAAAASUVORK5CYII=), linear-gradient(#43a6e2, #247ac1);
}
#nav-main-menu li.first > a {
border-radius: 10px 10px 0 0;
}
+
#nav-main-menu li.last > a {
border-radius: 0 0 10px 10px;
}
Oops, something went wrong.

0 comments on commit 3ffcc86

Please sign in to comment.