evanmcc92/nav.htm

## nav.htm
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
#body{
	width: 85%;
	border: 1px solid black;
	margin: 0 auto;
}
nav {
	background-color:#CCC;
	width: 100%;
	padding: 10px 0;
	text-align:center;
}
nav ul{
	list-style:none;
}
.main-nav li {
	padding: 0 30px;
	display:inline;
}
.mobile-button {
	display:none;
}
@media (max-width: 700px) {
	#body{
		width: 100%;
	}
	nav {
		text-align:left;
	}
	.mobile-button {
		display:inline;
	}
	#menu{
		background: url("http://i.stack.imgur.com/keOWD.png") no-repeat;
    	width:20px;
    	height:20px;
    	display: block;
		float:right;
		padding-right: 30px;
	}
	.main-nav{
		display:none;
	}
	.main-nav li {
		display:list-item;
		padding-top: 10px;
	}
}
</style>
</head>

<body>
<div id="body">
<h1>Text</h1>
<nav>
	<div class="mobile-button">
        <ul>
            <li><a href="#">Menu<span id="menu"></span></a></li>
        </ul>
    </div>
    <div class="main-nav">
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </div>
</nav>
<script>
$(document).ready(function(){
	function SlideDown(){
		$(".main-nav").slideDown();
	}
	function SlideUp(){
		$(".main-nav").slideUp(function(){
			$(this).css("display","");
		})
	}
	counter = 0;
	$(".mobile-button").click(function(){
		counter++;
		if (counter % 2 === 0){
			SlideUp();
		}else{
			SlideDown();
		}
	});
});
</script>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies dignissim sem eu tincidunt. Aliquam a velit id quam fermentum tincidunt. Vivamus sed felis metus. Donec aliquet mattis ipsum, at gravida est egestas at. Ut scelerisque eu turpis sed viverra. Proin fringilla, diam at egestas lobortis, diam urna consequat velit, sed lobortis elit ante vel purus. Vivamus quam odio, bibendum vitae odio volutpat, dictum eleifend nisi. Etiam lorem nibh, lacinia vitae eleifend quis, congue in metus. Praesent eleifend pulvinar est suscipit dapibus. &gt;</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies dignissim sem eu tincidunt. Aliquam a velit id quam fermentum tincidunt. Vivamus sed felis metus. Donec aliquet mattis ipsum, at gravida est egestas at. Ut scelerisque eu turpis sed viverra. Proin fringilla, diam at egestas lobortis, diam urna consequat velit, sed lobortis elit ante vel purus. Vivamus quam odio, bibendum vitae odio volutpat, dictum eleifend nisi. Etiam lorem nibh, lacinia vitae eleifend quis, congue in metus. Praesent eleifend pulvinar est suscipit dapibus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies dignissim sem eu tincidunt. Aliquam a velit id quam fermentum tincidunt. Vivamus sed felis metus. Donec aliquet mattis ipsum, at gravida est egestas at. Ut scelerisque eu turpis sed viverra. Proin fringilla, diam at egestas lobortis, diam urna consequat velit, sed lobortis elit ante vel purus. Vivamus quam odio, bibendum vitae odio volutpat, dictum eleifend nisi. Etiam lorem nibh, lacinia vitae eleifend quis, congue in metus. Praesent eleifend pulvinar est suscipit dapibus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies dignissim sem eu tincidunt. Aliquam a velit id quam fermentum tincidunt. Vivamus sed felis metus. Donec aliquet mattis ipsum, at gravida est egestas at. Ut scelerisque eu turpis sed viverra. Proin fringilla, diam at egestas lobortis, diam urna consequat velit, sed lobortis elit ante vel purus. Vivamus quam odio, bibendum vitae odio volutpat, dictum eleifend nisi. Etiam lorem nibh, lacinia vitae eleifend quis, congue in metus. Praesent eleifend pulvinar est suscipit dapibus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies dignissim sem eu tincidunt. Aliquam a velit id quam fermentum tincidunt. Vivamus sed felis metus. Donec aliquet mattis ipsum, at gravida est egestas at. Ut scelerisque eu turpis sed viverra. Proin fringilla, diam at egestas lobortis, diam urna consequat velit, sed lobortis elit ante vel purus. Vivamus quam odio, bibendum vitae odio volutpat, dictum eleifend nisi. Etiam lorem nibh, lacinia vitae eleifend quis, congue in metus. Praesent eleifend pulvinar est suscipit dapibus. </p>
</article>
</div>
</body>
</html>