The fantastic little JS Bin Example of using Cutting the Mustard by Jeremy Keith from this article.
Last active
December 21, 2015 22:39
-
-
Save greenboyroy/6377063 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<!-- | |
Created using jsbin.com | |
Source can be edited via http://jsbin.com/iyecek/1/edit | |
--> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Navigation demo</title> | |
<script> | |
var cutsTheMustard = function() { | |
if (document.querySelector && window.addEventListener) { | |
return true; | |
} else { | |
return false; | |
} | |
}; | |
if (cutsTheMustard()===true) { | |
document.documentElement.className += ' cutsthemustard'; | |
} | |
</script> | |
<style id="jsbin-css"> | |
html { | |
background: black; | |
height: 100%; | |
} | |
body { | |
margin: 0; | |
background: white; | |
height: 100%; | |
} | |
[role="main"], | |
[role="navigation"] { | |
min-height: 100%; | |
padding: 1em; | |
box-sizing: border-box; | |
} | |
[role="main"] { | |
background-color: white; | |
color: black; | |
} | |
[role="navigation"] { | |
background-color: black; | |
color: white; | |
} | |
a { | |
color: red; | |
font-weight: bold; | |
text-decoration: none; | |
} | |
.cutsthemustard [role="main"] { | |
width: 100%; | |
z-index: 2; | |
position: absolute; | |
top: 0; | |
left: 0; | |
-webkit-transition: all .25s; | |
-moz-transition: all .25s; | |
-ms-transition: all .25s; | |
-o-transition: all .25s; | |
transition: all .25s; | |
} | |
.cutsthemustard [role="navigation"] { | |
width: 75%; | |
z-index: 1; | |
position: absolute; | |
top: 0; | |
left: 0; | |
} | |
.cutsthemustard .active [role="main"] { | |
left: 75%; | |
} | |
.cutsthemustard a[href="#content"] { | |
display: none; | |
} | |
</style> | |
</head> | |
<body> | |
<main role="main" id="content"> | |
<a href="#menu">Menu</a> | |
<p>This <code>body</code> of this document has two children: a <code>main</code> element followed by a <code>nav</code> element.</p> | |
<p>That <code>nav</code> element has an ID which the menu link at the top of the <code>main</code> element points to:</p> | |
<code><a href="#menu">Menu</a></code> | |
<p>So by default, the navigation is available via the “jump to footer” pattern.</p> | |
<p>If JavaScript is available, and the browser passes the feature detection test (for <code>querySelector</code> and <code>addEventListener</code>), then a class of <code>cutsthemustard</code> is added to the <code>body</code>. This applies different styling to the <code>main</code> and <code>nav</code> elements so that they are all set for the “off-canvas” pattern (both elements are given <code>z-index</code> values).</p> | |
<p>An event handler is added to the menu link which toggles a class of <code>active</code> on the body. The presence or absence of this class is what triggers the ”off-canvas” behaviour by changing the position of the <code>main</code> element.</p> | |
<p>So for browsers that “cut the mustard”, the navigation is available via the “off-canvas” pattern.</p> | |
</main> | |
<nav role="navigation" id="menu"> | |
<ul> | |
<li><a href="http://adactio.com/">Adactio</a></li> | |
<li><a href="http://huffduffer.com/">Huffduffer</a></li> | |
<li><a href="http://saltercane.com/">Salter Cane</a></li> | |
<li><a href="http://thesession.org/">The Session</a></li> | |
</ul> | |
<a href="#content">Back</a> | |
</nav> | |
<script> | |
(function(win, doc) { | |
if (cutsTheMustard() === false) return; | |
var toggleClassName = function(element, toggleClass) { | |
var reg = new RegExp('(\\s|^)' + toggleClass + '(\\s|$)'); | |
if (!element.className.match(reg)) { | |
element.className += ' ' + toggleClass; | |
} else { | |
element.className = element.className.replace(reg, ''); | |
} | |
}; | |
doc.querySelector('a[href="#menu"]').addEventListener('click', function(ev) { | |
ev.preventDefault(); | |
toggleClassName(doc.body, 'active'); | |
}); | |
}(this, this.document)); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment