greenboyroy/Cutting the Mustard.md

## Cutting the Mustard.md

      
    Raw
  

              Cutting the Mustard.md
            
          
    Cutting the Mustard

The fantastic little JS Bin Example of using Cutting the Mustard by Jeremy Keith from this article.

  
## jsbin.iyecek.html

<!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>&lt;a href=&quot;#menu&quot;&gt;Menu&lt;/a&gt;</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>

	<!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>