Nav toggler

by Comandeer

HTML

<nav class="nav" aria-labelledby="nav-label">
	<h2 id="nav-label" class="nav__label">Menu</h2>
	<button type="button" class="nav__toggler" aria-expanded="false">
		<span class="nav__toggler-icon" aria-hidden="true"></span>
		<span class="nav__toggler-label">Menu</span>
	</button>
	<ul class="nav__menu menu">
		<li class="menu__item"><a href="#" class="menu__link">Link 1</a></li>
		<li class="menu__item"><a href="#" class="menu__link">Link 2</a></li>
	</ul>
</nav>

CSS

.nav__toggler-icon::before {
	content: '☰';
}

/* https://github.com/h5bp/html5-boilerplate/blob/4ded8b5ce09d2b665e5893945b29d8d626691086/dist/css/main.css#L135-L145 */
.nav__label {
	border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.menu {
	width: 400px;
	margin: 0 auto;
	background: #ccc;
	border-radius: 20px;
}
.nav__menu {
	display: none;
}
.nav__menu_open {
	display: block;
}

.menu__item, .menu__link {
	display: block;
}
.menu__link {
	line-height: 40px;
}

JavaScript

( function() {
	var button = document.querySelector( '.nav__toggler' );
	
	button.addEventListener( 'click', function( evt ) {
		var menu = document.querySelector( '.nav__menu' );
		
		menu.classList.toggle( 'nav__menu_open' );
		button.setAttribute( 'aria-expanded', String( menu.classList.contains( 'nav__menu_open' ) ) );
	}, false );
}() );