Responsive grid with CSS Grids

Responsive grid with CSS Grids

by Hector de la Rosa

HTML

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Menú Vertical Multinivel con HTML5 y CSS 3</title>
	<link rel="stylesheet" href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/css/metro-icons.min.css">

<div class="container">
		<span class="mif-chevron-left mif-3x boton"></span>
		<nav>
			<ul id="menu_principal">
				<li><a href="#"><span class="mif-home mif-3x principales"></span>Inicio</a></li>
				<li><a href=""><span class="mif-organization mif-3x principales"></span>Nosotros</a></li>
				<li><a href=""><span class="mif-contacts-mail mif-3x principales"></span>Contacto</a></li>
			</ul>
		</nav>
</div>

JavaScript

window.onload = function(){
	document.querySelector('.boton').addEventListener('click', function(){
		document.querySelector('.container').classList.toggle('invisible');
		this.classList.toggle('mif-chevron-right');
	});
}