CoryDuncan/gist:714e67b2c7be048bd4a1

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Nav Toggle</title>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<nav id="nav">
  <a href="#nav-menu" id="nav-toggle">Nav Menu</a>
  <ul id="nav-menu">
    <li><a href="#">Nav Item 1</a></li>
    <li><a href="#">Nav Item 2</a></li>
    <li><a href="#">Nav Item 3</a></li>
    <li><a href="#">Nav Item 4</a></li>
    <li><a href="#">Nav Item 5</a></li>
  </ul>
</nav>
</body>
</html>

## gistfile2.css
* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}
#nav {
  margin: 10px;
  position: relative;
}
#nav-toggle {
  display: none;
}
#nav-menu ul {
  list-style: none;
}
#nav-menu li {
  margin: 3px 0;
}
#nav-menu a {
  color: inherit;
  display: block;
}

@media ( max-width: 600px ) {
  #nav-toggle {
    display: block;
    height: 30px;
    opacity: .5;
    overflow: hidden;
    position: relative;
    text-indent: 100%;
    white-space: nowrap;
    width: 20px;
  }
  #nav-toggle:after {
    background: #000;
    box-shadow: 0 8px 0 #000, 0 -8px 0 #000;
    content: '';
    height: 3px;
    left: 0;
    margin: -2px 0 0;
    position: absolute;
    right: 0;
    transition: 250ms;
    top: 50%;
  }
  #nav-toggle.on:after {
    box-shadow: none;
  }
  #nav-menu {
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 100%;
  }
  #nav-toggle.on + #nav-menu {
    display: block;
  }
}

## gistfile3.js
function navToggle() {
  $('#nav-toggle').on('click', function(e) {

    // exit if toggle is hidden
    if ($(this).css('display') === 'none') {
      return;
    }

    e.preventDefault();

    $(this).toggleClass('on');
  });
}

$(window).ready(function(){
  navToggle();
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Nav Toggle</title>
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	</head>
	<body>
	<nav id="nav">
	<a href="#nav-menu" id="nav-toggle">Nav Menu</a>
	<ul id="nav-menu">
	<li><a href="#">Nav Item 1</a></li>
	<li><a href="#">Nav Item 2</a></li>
	<li><a href="#">Nav Item 3</a></li>
	<li><a href="#">Nav Item 4</a></li>
	<li><a href="#">Nav Item 5</a></li>
	</ul>
	</nav>
	</body>
	</html>
	* {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	}
	#nav {
	margin: 10px;
	position: relative;
	}
	#nav-toggle {
	display: none;
	}
	#nav-menu ul {
	list-style: none;
	}
	#nav-menu li {
	margin: 3px 0;
	}
	#nav-menu a {
	color: inherit;
	display: block;
	}

	@media ( max-width: 600px ) {
	#nav-toggle {
	display: block;
	height: 30px;
	opacity: .5;
	overflow: hidden;
	position: relative;
	text-indent: 100%;
	white-space: nowrap;
	width: 20px;
	}
	#nav-toggle:after {
	background: #000;
	box-shadow: 0 8px 0 #000, 0 -8px 0 #000;
	content: '';
	height: 3px;
	left: 0;
	margin: -2px 0 0;
	position: absolute;
	right: 0;
	transition: 250ms;
	top: 50%;
	}
	#nav-toggle.on:after {
	box-shadow: none;
	}
	#nav-menu {
	display: none;
	left: 0;
	position: absolute;
	right: 0;
	top: 100%;
	}
	#nav-toggle.on + #nav-menu {
	display: block;
	}
	}
	function navToggle() {
	$('#nav-toggle').on('click', function(e) {

	// exit if toggle is hidden
	if ($(this).css('display') === 'none') {
	return;
	}

	e.preventDefault();

	$(this).toggleClass('on');
	});
	}

	$(window).ready(function(){
	navToggle();
	});