nav:target - Simple, Semantic, Script free, Accessible Navigation pattern.

nav-style.css

/* Default state */
#main-nav {
	top:-100%; /* this is how far the nav slides in from */
  -webkit-transition:top .5s cubic-bezier(.10, .10, .25, .90);  
  -moz-transition:top .5s cubic-bezier(.10, .10, .25, .90);  
  -o-transition:top .5s cubic-bezier(.10, .10, .25, .90);  
  transition:top .5s cubic-bezier(.10, .10, .25, .90); 
}

/* Triggered state */
#main-nav:target {
	position: absolute; /* use absolute of fixed - if you have a small/short menu */
	top:0;
  width:100%;
}

nav:target.html

<header>
	<a href="#nav">Jump to naviation</a>
	<h1>Site Title</h1>
</header>

<main>
	<h1>Page Title</h1>
	<p>Page Content</p>
<main>

<footer>
	<nav id="nav">
		<ul>
			Navigation List
		</ul>
		<a href="#">Jump to top</a>
	</nav>
</footer>

triggers.css

.jump-link {
  position: absolute;
	top:0em;
	left:0em;
	width:2em;
	height:2em;
	display:block;
	text-align:center;
	line-height:2em;
	background:#333;
	color:#fff;
}

	.jump-link:hover,
	.jump-link:focus {
		background:#c66;
		text-decoration:none;
	}

	.jump-link:after {
		position:absolute;
		margin-left:2em;
		top:0;
		color:#c66;
		background:#fff;
		padding:0 0.5em;
		display: block;
	}

	.jump-link:hover:after {
		display: none;
	}

#nav-open:before {
	content:'\2630'; /* Hamburger symbol */
}

	#nav-open:focus:after {
		content:'menu';
	}

#nav-close:before {
	content:'\2a2f'; /* Multiply symbol */
}

	#nav-close:focus:after {
		content:'close';
	}

#nav-close {
	display: none; /* hides close button until menu is triggered */
}

#main-nav:target #nav-close {
	display: block;
}