Responsive menu

dabblet.css

/** Responsive menu
 *	Collapsed main menu for narrow screens.
 */
* {
	box-sizing: border-box;
}
article,
footer,
header,
main,
nav,
section {
	display: block;
}
html {
	overflow-y: scroll;
}
h1,
h2 {
	margin-bottom: 0;
	font-family: "Arial Narrow", sans-serif;
}
p {
	margin-top: 0;
}
:link:hover,
:visited:hover,
:link:focus,
:visited:focus {
	background: green;
}
nav > ul {
	margin: 0;
	padding: 0;
}
.visually-hidden {
	position: absolute;
	overflow: hidden;
	clip: rect(0 0 0 0);
	margin: -1px;
	padding: 0;
	width: 1px;
	height: 1px;
	border: 0;
}

/*	! Layout */
.body {
	position: relative;
	margin: 1rem auto;
	padding: 0 1rem;
	max-width: 35rem;
	background: #f0f0f0;
	color: black;
	font: 88%/1.4 sans-serif;	/* 14px/20px */
}
[role="banner"] {
	margin: 0 -1rem;
	padding:0 1rem;
	background: #333;
	color: white;
}
/*	Padding-top is space for the menu */
.main {
	position: relative;
	padding-top: 2.5em;
}
footer {
	overflow: hidden;
	margin: 0 -1rem;
	padding: 1rem;
	background: #333;
	color: white;
}
/* Heading with link to Home Page */
.banner__h1 {
	position: relative;
	z-index: 1;
	margin: 0;
}
.banner__h1 a {
	color: inherit;
	text-decoration: none;
}
/*	! Main menu drop-down
 *	Extra top padding puts it above the viewport,
 *	preventing page scroll when it's targeted.
========================================================== */
.main-menu {
	position: absolute;
	top: 0;
	right: -1rem;
	left: -1rem;
	margin-top: -5rem;
	padding: 1rem;
	padding-top: 5rem;
}
.main-menu__list {
	position: absolute;
	right: 0;
	left: 0;
	outline: 0;
	border-bottom: 1px solid #999;
	box-shadow: 0 5px 10px -5px #999;
	font-size: 1.14em;
	line-height: 2;
}
.main-menu__list li {
	display: block;
	overflow: hidden;
	max-height: 0;
 	transition: max-height .3s;
}
.main-menu__list .current {
	max-height: 2.1em;
}
.main-menu__list a {
	display: block;
	padding: 0 1rem;
	border-top: 1px solid #999;
	background: #333;
	color: white;
	text-decoration: none;
}
.main-menu__list .current a {
	background: #666;
}

/* ! Main menu controls */
 .skip-link,
.skip-link:after {
	position: absolute;
	top: 0;
	right: 0;
}
.skip-link {
	z-index: 1;
	width: 1.4em;
	height: 1.4em;
	border-left: 1px solid #999;
	color: inherit;
	text-indent: -99em;
	font-size: 2em;	
}
.skip-link:after {
	top: 0;
	right:0;
	z-index: 0;
	width: 1em;
	content: "\2261";
	text-align: center;
	text-indent: 0;
	font-size: 1.5em;
	line-height: .8;
}
.return-link {
	display: none;
}
/* 	! Drop-down revealed
 *	Stack above the "close" link
========================================================== */
#menu:target .main-menu__list {
	z-index: 3;
	outline: none;
}
/*  Reveal the menu items */
#menu:target li {
	max-height: 2.1em;
}
/*  This "return to top" link closes the drop-down.
 *	It covers the entire page, except for the main menu
========================================================== */
#menu:target .return-link {
	position: absolute;
	top: -99em;
	right: 0;
	bottom: -99em;
	left: 0;
	z-index: 2;
	display: block;
	outline: 0;
	border: 0;
	text-indent: -99em;
}
#menu:target .return-link:hover,
#menu:target .return-link:focus {
	background: transparent;
}

dabblet.html

<div class="body">
	<header role="banner">
		<h1 class="banner__h1"><a href="#home">A Responsive Menu</a></h1>
		<a class="skip-link" href="#menu">Skip to menu</a>
	</header>
	<div class="main">
		<article>
			<h2>First article</h2>
			<p>Some.</p>
			<p>Stuff.</p>
			<p>Here.</p>
		</article>
		<article>
			<h2>Second article</h2>
			<p>More.</p>
			<p>Stuff.</p>
		</article>
		<nav role="navigation" id="menu" class="main-menu">
			<h3 class="visually-hidden">Main Menu</h3>
			<ul class="main-menu__list" tabindex="0">
				<li><a href="#home">Home</a></li>
				<li class="current"><a>Articles</a></li>
				<li><a href="#tutorials">Tutorials</a></li>
				<li><a href="#downloads">Downloads</a></li>
				<li><a href="#about-us">About Us</a></li>
				<li><a href="#contact-us">Contact Us</a></li>
			</ul>
			<a class="return-link" href="#">Back to top</a>
		</nav>
	</div>
	<footer>
		Some footer stuff here
	</footer>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}