Improve responsive nav experience
This commit is contained in:
Michael Rose
parent
73d9750be4
commit
82e306ebc9
7 changed files with 186 additions and 8 deletions
|
|
@ -46,6 +46,9 @@
|
|||
<script src="{{ site.url }}/assets/js/vendor/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Modernizr -->
|
||||
<script src="{{ site.url }}/assets/js/vendor/modernizr-2.7.1.custom.min.js"></script>
|
||||
|
||||
<!-- Icons -->
|
||||
<!-- 16x16 -->
|
||||
<link rel="shortcut icon" href="{{ site.url }}/favicon.ico">
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@
|
|||
<a href="{{ site.url }}">{{ site.title }}</a>
|
||||
</div><!-- /.site-name -->
|
||||
<div class="top-navigation">
|
||||
<nav role="navigation">
|
||||
<nav role="navigation" id="site-nav" class="nav">
|
||||
<ul>
|
||||
{% 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>
|
||||
{% endfor %}
|
||||
<li><i class="icon-feed"></i> <a href="{{ site.url }}/feed.xml" title="Atom/RSS feed">Feed</a>
|
||||
</ul>
|
||||
</nav>
|
||||
</div><!-- /.top-navigation -->
|
||||
|
|
|
|||
2
assets/css/main.min.css
vendored
2
assets/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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 */
|
||||
|
||||
// FitVids options
|
||||
|
|
|
|||
2
assets/js/scripts.min.js
vendored
2
assets/js/scripts.min.js
vendored
File diff suppressed because one or more lines are too long
4
assets/js/vendor/modernizr-2.7.1.custom.min.js
vendored
Normal file
4
assets/js/vendor/modernizr-2.7.1.custom.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -18,10 +18,12 @@ body {
|
|||
margin-bottom: 1em;
|
||||
float: none;
|
||||
display: block;
|
||||
.font-rem(24);
|
||||
@media @600px {
|
||||
.grid(12,2);
|
||||
.prefix(12,0.5);
|
||||
.suffix(12,0.5);
|
||||
.font-rem(16);
|
||||
}
|
||||
@media @1382px {
|
||||
.grid(12,1.5);
|
||||
|
|
@ -44,22 +46,161 @@ body {
|
|||
.grid(12,8);
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
clear: both;
|
||||
list-style-type: none;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
list-style-type: none;
|
||||
display: inline;
|
||||
margin-right: 25px;
|
||||
white-space: nowrap;
|
||||
border-bottom: 1px solid lighten(@black,80);
|
||||
border-bottom: 1px solid fade(@black,10);
|
||||
.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 {
|
||||
display: block;
|
||||
padding: 10px 0;
|
||||
decoration: none;
|
||||
border-bottom: 0 solid transparent;
|
||||
.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 {
|
||||
counter-reset: captions;
|
||||
.container();
|
||||
|
|
|
|||
Loading…
Reference in a new issue