Improve responsive nav experience

This commit is contained in:
Michael Rose 2014-02-13 14:20:28 -05:00
parent 73d9750be4
commit 82e306ebc9
7 changed files with 186 additions and 8 deletions

View file

@ -46,6 +46,9 @@
<script src="{{ site.url }}/assets/js/vendor/respond.min.js"></script> <script src="{{ site.url }}/assets/js/vendor/respond.min.js"></script>
<![endif]--> <![endif]-->
<!-- Modernizr -->
<script src="{{ site.url }}/assets/js/vendor/modernizr-2.7.1.custom.min.js"></script>
<!-- Icons --> <!-- Icons -->
<!-- 16x16 --> <!-- 16x16 -->
<link rel="shortcut icon" href="{{ site.url }}/favicon.ico"> <link rel="shortcut icon" href="{{ site.url }}/favicon.ico">

View file

@ -3,12 +3,11 @@
<a href="{{ site.url }}">{{ site.title }}</a> <a href="{{ site.url }}">{{ site.title }}</a>
</div><!-- /.site-name --> </div><!-- /.site-name -->
<div class="top-navigation"> <div class="top-navigation">
<nav role="navigation"> <nav role="navigation" id="site-nav" class="nav">
<ul> <ul>
{% for link in site.links %} {% for link in site.links %}
<li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li> <li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li>
{% endfor %} {% endfor %}
<li><i class="icon-feed"></i> <a href="{{ site.url }}/feed.xml" title="Atom/RSS feed">Feed</a>
</ul> </ul>
</nav> </nav>
</div><!-- /.top-navigation --> </div><!-- /.top-navigation -->

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,34 @@
/*! Responsive Menu */
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/
// The function to change the class
var changeClass = function (r,className1,className2) {
var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
if( regex.test(r.className) ) {
r.className = r.className.replace(regex,' '+className2+' ');
}
else{
r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
}
return r.className;
};
// Creating our button in JS for smaller screens
var menuElements = document.getElementById('site-nav');
menuElements.insertAdjacentHTML('afterBegin','<button type="button" role="button" id="menutoggle" class="navtoogle lines-button x" aria-hidden="true"><span class="lines"></span>menu</button>');
// Toggle the class on click to show / hide the menu
document.getElementById('menutoggle').onclick = function() {
changeClass(this, 'navtoogle active', 'navtoogle');
};
// http://tympanus.net/codrops/2013/05/08/responsive-retina-ready-menu/comment-page-2/#comment-438918
document.onclick = function(e) {
var mobileButton = document.getElementById('menutoggle'),
buttonStyle = mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;
if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
changeClass(mobileButton, 'navtoogle active', 'navtoogle');
}
};
/*! Plugin options and other jQuery stuff */ /*! Plugin options and other jQuery stuff */
// FitVids options // FitVids options

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -18,10 +18,12 @@ body {
margin-bottom: 1em; margin-bottom: 1em;
float: none; float: none;
display: block; display: block;
.font-rem(24);
@media @600px { @media @600px {
.grid(12,2); .grid(12,2);
.prefix(12,0.5); .prefix(12,0.5);
.suffix(12,0.5); .suffix(12,0.5);
.font-rem(16);
} }
@media @1382px { @media @1382px {
.grid(12,1.5); .grid(12,1.5);
@ -44,22 +46,161 @@ body {
.grid(12,8); .grid(12,8);
} }
ul { ul {
list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
clear: both;
list-style-type: none;
} }
li { li {
display: block;
list-style-type: none; list-style-type: none;
display: inline; border-bottom: 1px solid lighten(@black,80);
margin-right: 25px; border-bottom: 1px solid fade(@black,10);
white-space: nowrap; .font-rem(16);
&:last-child {
border-bottom: 0 solid transparent;
}
@media @600px {
display: inline;
margin-right: 25px;
white-space: nowrap;
border-bottom: 0 solid transparent;
}
a { a {
display: block;
padding: 10px 0;
decoration: none; decoration: none;
border-bottom: 0 solid transparent; border-bottom: 0 solid transparent;
.transition(all .2s); .transition(all .2s);
@media @600px {
display: inline;
padding: 0;
}
} }
} }
} }
// Navicon lines
@button-size: 1.5rem;
.line() {
display: inline-block;
width: @button-size;
height: @button-size/7;
// line color
background: @white;
border-radius: @button-size/14;
transition: .3s;
}
.lines-button {
padding: @button-size/4 @button-size/2;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: @button-size/7;
}
.lines-button:hover {
opacity: 1;
}
.lines-button:active {
transition: 0;
}
.lines {
margin-right: 10px;
margin-bottom: @button-size/5;
// create middle line
.line();
position: relative;
// create the upper and lower lines as pseudo-elements of the middle line
&:before,
&:after {
.line();
position: absolute;
left: 0;
content: '';
-webkit-transform-origin: @button-size/14 center;
transform-origin: @button-size/14 center;
}
&:before { top: @button-size/4; }
&:after { top: -@button-size/4; }
}
.lines-button:hover {
opacity: 1;
.lines {
&:before { top: @button-size/3.5; }
&:after { top: -@button-size/3.5; }
}
}
.lines-button.x.active .lines {
// hide the middle line
background: transparent;
// overlap the lines by setting both their top values to 0
&:before,
&:after {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
top: 0;
width: @button-size;
}
// rotate the lines to form the x shape
&:before {
-webkit-transform: rotate3d(0,0,1,45deg);
transform: rotate3d(0,0,1,45deg);
}
&:after {
-webkit-transform: rotate3d(0,0,1,-45deg);
transform: rotate3d(0,0,1,-45deg);
}
}
// Style the toggle menu link and hide it
.nav .navtoogle {
.font-rem(18);
font-weight: normal;
background-color: @black;
color: @white;
border: none;
cursor: pointer;
@media @600px {
display: none;
}
}
.nav button {
border: none;
background: none;
}
.navtoogle i {
z-index:-1;
}
.icon-menu {
position: relative;
top: 3px;
line-height: 0;
}
// When JavaScript is disabled, we hide the toggle button
.no-js .nav .navtoggle {
display: none;
}
// When JavaScript is disabled, we show the menu
.no-js .nav ul {
max-height: 30em;
overflow: hidden;
}
// When JavaScript is enabled, we hide the menu
.js .nav ul {
max-height: 0;
overflow: hidden;
@media @600px {
max-height: 30em;
}
}
// Displaying the menu when the user has clicked on the button
.js .nav .active + ul {
max-height: 30em;
overflow: hidden;
-webkit-transition: max-height .4s;
-moz-transition: max-height .4s;
-o-transition: max-height .4s;
-ms-transition: max-height .4s;
transition: max-height .4s;
}
#main { #main {
counter-reset: captions; counter-reset: captions;
.container(); .container();