Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsive menu JavaScript #192

Merged
merged 10 commits into from Jun 25, 2012
Merged

Responsive menu JavaScript #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
ae7cd33
Menu progress
craigcook Jun 20, 2012
4966e07
Multi-level mobile menu sort of working
craigcook Jun 20, 2012
9e07ae6
Remove trailing whitespace.
gauthierm Jun 20, 2012
3ffcc86
Responsive menu JavaScript.
gauthierm Jun 25, 2012
4ae8b44
Use 4 spaces instead of 2 spaces for indent in JS code.
gauthierm Jun 25, 2012
0f5b73e
move rest of menu functions inside NavMain object.
gauthierm Jun 25, 2012
4e42e17
Reorder functions to be more logical.
gauthierm Jun 25, 2012
4b1d26f
Remove unnecessary indentation and move document.ready() call to bott…
gauthierm Jun 25, 2012
e30075d
Add new JS bundle for responsive nav-main.
gauthierm Jun 25, 2012
faf4de3
Re-relativize tabzilla
sgarrity Jun 25, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 11 additions & 10 deletions apps/firefox/templates/firefox/base-resp.html
View file
Open in desktop
Expand Up @@ -17,10 +17,11 @@
{% endblock %}

{% block site_header_nav %}
<nav role="navigation" id="nav-main">
<ul role="menubar">
<nav id="nav-main" role="navigation">
<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">
<ul aria-expanded="false" id="nav-main-features-submenu" class="submenu">
<li class="first"><a href="{{ url('firefox.features') }}" tabindex="-1">Features</a></li>
<li><a href="{{ url('firefox.customize') }}" tabindex="-1">Customize</a></li>
<li><a href="{{ url('firefox.performance') }}" tabindex="-1">Performance</a></li>
Expand All @@ -29,15 +30,15 @@
</ul>
</li>
<li id="nav-main-mobile"><a href="/en-US/mobile/" tabindex="0" aria-owns="nav-main-mobile-submenu" aria-haspopup="true">Mobile</a>
<ul aria-expanded="false" id="nav-main-mobile-submenu">
<li class="first"><a href="/en-US/mobile/" tabindex="-1">Download</a></li>
<ul aria-expanded="false" id="nav-main-mobile-submenu" class="submenu">
<li class="first"><a href="/en-US/mobile/" tabindex="-1">Overview</a></li>
<li><a href="/en-US/mobile/features/" tabindex="-1">Features</a></li>
<li><a href="https://addons.mozilla.org/en-US/mobile/?browse=featured" tabindex="-1">Customize</a></li>
<li class="last"><a href="/en-US/mobile/faq/" tabindex="-1">FAQ</a></li>
</ul>
</li>
<li id="nav-main-releases" class=""><a href="/en-US/firefox/channel/" tabindex="0" aria-owns="nav-main-releases-submenu" aria-haspopup="true">Releases</a>
<ul aria-expanded="false" id="nav-main-releases-submenu">
<ul aria-expanded="false" id="nav-main-releases-submenu" class="submenu">
<li class="first"><a href="/en-US/firefox/channel/" tabindex="-1">Overview</a></li>
<li><a href="/en-US/firefox/aurora/" tabindex="-1">Firefox Aurora</a></li>
<li><a href="/beta/" tabindex="-1">Firefox Beta</a></li>
Expand All @@ -46,20 +47,20 @@
</ul>
</li>
<li id="nav-main-addons"><a href="https://addons.mozilla.org/" tabindex="0" aria-owns="nav-main-addons-submenu" aria-haspopup="true">Add-ons</a>
<ul aria-expanded="false" id="nav-main-addons-submenu">
<ul aria-expanded="false" id="nav-main-addons-submenu" class="submenu">
<li class="first"><a href="https://addons.mozilla.org/firefox/" tabindex="-1">Desktop Add-ons</a></li>
<li><a href="https://addons.mozilla.org/mobile/" tabindex="-1">Mobile Add-ons</a></li>
<li class="last"><a href="http://www.getpersonas.com/" tabindex="-1">Personas</a></li>
</ul>
</li>
<li id="nav-main-support"><a href="http://support.mozilla.org/" tabindex="0" aria-owns="nav-main-support-submenu" aria-haspopup="true">Support</a>
<ul aria-expanded="false" id="nav-main-support-submenu">
<ul aria-expanded="false" id="nav-main-support-submenu" class="submenu">
<li class="first"><a href="http://support.mozilla.org/en-US/kb/" tabindex="-1">Desktop Support</a></li>
<li class="last"><a href="http://support.mozilla.org/mobile" tabindex="-1">Mobile Support</a></li>
</ul>
</li>
<li class="last" id="nav-main-about"><a href="/en-US/firefox/about/" tabindex="0" aria-owns="nav-main-about-submenu" aria-haspopup="true">About</a>
<ul aria-expanded="false" id="nav-main-about-submenu">
<ul aria-expanded="false" id="nav-main-about-submenu" class="submenu">
<li class="first"><a href="http://blog.mozilla.com/" tabindex="-1">Blog</a></li>
<li><a href="/en-US/firefox/about/" tabindex="-1">About Firefox</a></li>
<li><a href="http://www.mozilla.org/join" tabindex="-1">Join Mozilla</a></li>
Expand All @@ -80,7 +81,7 @@ <h2><img src="{{ media('img/firefox/template/header-logo.png') }}" alt="Mozilla
{% endblock %}

{% block site_js %}
{{ js('firefox') }}
{{ js('firefox-resp') }}
{% endblock %}

{% block webtrends %}
Expand Down
178 changes: 178 additions & 0 deletions media/css/firefox/menu-resp.less
View file
Open in desktop
@@ -0,0 +1,178 @@
/* Top Level Menu Items */

#nav-main-menu {
.inline-block;
margin: 0;

li {
position: relative;

&.hover a {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAHAQMAAADpvlVZAAAAAXNSR0IArs4c6QAAAAZQTFRFAAAA////pdmf3QAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AMBEjcKOURVdQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAdSURBVAjXY2BiYGBnYOBvYJA/wGD/gKH+A8P/HwAiJAX9mUp9sAAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
background-position: center bottom;
outline: 0;
}
}

}

/* Second-level Menu Items */

.js #nav-main li.hover .submenu {
left: 0;
opacity: 1;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}

#nav-main .submenu,
#nav-main .submenu li {
height: auto;
border: 0;
float: none;
display: block;
}

#nav-main .submenu {
position: absolute;
z-index: 100;
left: -999em;
top: 43px;
opacity: 0;
width: 190px;
text-shadow: 1px 1px 0 #fff, 0 0 5px #fff;
background: #fff;
padding: 1px 0;
border-bottom: 1px solid #ddd;

li,
li.hover {
background-image: none;

a,
a:link,
a:visited,
span {
overflow: hidden;
padding: 7px 10px;
margin: 0;
height: auto;
float: none;
display: block;
font-size: 11px;
border: 0;
background: none;
position: relative;
-moz-transition: background 0.1s ease-in;
-webkit-transition: background 0.1s ease-in;
transition: background 0.1s ease-in;
}

a,
a:hover,
a:focus,
a:active {
background-image: none;
background: rgb(227,235,244);
background: rgba(152,178,201,0.2);
-moz-transition: background 0.1s ease-out;
-webkit-transition: background 0.1s ease-out;
transition: background 0.1s ease-out;
}
}

}
/* Currently active menu items */

#nav-mail ul li.current {
span,
a,
a:link,
a:visited {
background: #fbfdff;
padding-right: 30px;
padding-bottom: 15px;
}

ul span,
ul a,
ul a:link,
ul a:visited {
background: none;
height: auto;
padding: 8px 10px;
}
}

/* {{{ Dark Background Header */

.darkbg #nav-main ul li {

a,
a:link,
a:visited,
span {
color: #fff;
border-color: #555;
}

li a,
li a:link,
li a:visited,
li span {
color: #484848;
}

a:hover,
&:hover a,
.hover a,
.hover a:link,
.hover a:visited {
background: #ccc;
color: #484848;
}

}

/* }}} */

/* Mobile Layout: 320px */
@media only screen and (max-width: @breakTablet) {

#nav-main-menu {
margin: 15px 0 0 -10px;

li.hover a {
background-image: none;
}

}

#nav-main-menu .submenu,
.js #nav-main li.hover .submenu {
left: -999em;
margin-top: -8px;
background: #fff;
.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 {
-moz-transition: none 0s;
-webkit-transition: none 0s;
transition: none 0s;
}

}

67 changes: 58 additions & 9 deletions media/css/firefox/menu.less
View file
Open in desktop
@@ -1,6 +1,6 @@
/* Top Level Menu Items */

#nav-main ul {
#nav-main-menu {
.inline-block;
margin: 0;

Expand All @@ -12,8 +12,8 @@
a:link,
a:visited,
span {
z-index: 100;
position: relative;
z-index: 100;
position: relative;
}

&.hover a {
Expand All @@ -28,28 +28,27 @@

/* Second-level Menu Items */

.js #nav-main li.hover ul {
.js #nav-main li.hover .submenu {
left: 0;
opacity: 1;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}

#nav-main li ul,
#nav-main li ul li {
#nav-main .submenu,
#nav-main .submenu li {
height: auto;
border: 0;
float: none;
display: block;
}

#nav-main li ul {
#nav-main .submenu {
position: absolute;
left: -999em;
top: 48px;
top: 44px;
opacity: 0;
z-index: 999;
width: 190px;
text-shadow: 1px 1px 0 #fff, 0 0 5px #fff;
background: #fff;
Expand All @@ -59,6 +58,7 @@
li,
li.hover {
background-image: none;
z-index: 120;

a,
a:link,
Expand Down Expand Up @@ -146,3 +146,52 @@

}

/* Mobile Layout: 320px */
@media only screen and (max-width: @breakTablet) {

#nav-main-menu {
margin: 15px 0 0 -10px;

li {
// z-index: 100;

a,
a:link,
a:visited,
span {
// z-index: 100;
}

&.hover a {
background-image: none;
}
}

}

#nav-main-menu .submenu,
.js #nav-main li.hover .submenu {
z-index: 120;
left: 60px;
top: auto;
margin-top: -5px;
display: none;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 3px rgba(0,0,0,.35);
opacity: 1;
padding: 0;
}

#nav-main-menu .submenu a,
#nav-main-menu .submenu a:link,
#nav-main-menu .submenu a:visited {
z-index: 130;
-moz-transition: none 0s;
-webkit-transition: none 0s;
transition: none 0s;
}


}

2 changes: 1 addition & 1 deletion media/css/firefox/template-resp.less
View file
Open in desktop
@@ -1,5 +1,5 @@
@import "../sandstone/sandstone-resp.less";
@import "menu.less";
@import "menu-resp.less";

#masthead h1 {
padding: @baseLine 0;
Expand Down