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>

CSS

*, *:before, *:after{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



html{
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
}


@-webkit-keyframes aparecer {
	from{ opacity: 0;}
	to { opacity: 1; }
}

li > ul {
	position: absolute;
	top:0;
	left: 100%;
	width: 200px;
	box-shadow: 3px 0 10px rgba(0,0,0,.2);
	-webkit-animation: aparecer .7s;
	display: none;
}
ul{
	list-style: none;
	background: #f3f3f3;
}

.container{
	background: #f3f3f3;
	position: fixed;
	height: 100%;
	left: 0;
	width: 200px;
	top: 0;
	box-shadow: 3px 0 10px rgba(0,0,0,.3);
	-webkit-transition: left .5s ease;
	-o-transition: left .5s ease;
	transition: left .5s ease;
	z-index: 1000;
}

#menu_principal a, label{
	color: #868686;
	display: block;
	padding-left: 25px;
	text-decoration: none;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
#menu_principal {
	padding-top: 50%;
}

#menu_principal li {
	height: 20px;
	line-height: 60px;
	position: relative;
	width: 400px;
}

#menu_principal > li {
	margin: 0 0 5% 0;
}

.boton{
	color: #fff;
	height: 30px;
	line-height: 30px;
	position: absolute;
	left: 96%;
	top: 8px;
	border-radius: 3px;
	box-shadow: 0 0 10px rgba(0,0,0,.3);
	background: #64b4db;
	-webkit-transition: left .2s;
	-o-transition: left .2s;
	transition: left .2s;
	z-index: -1;
}
.boton:hover{
	left: 100%;
	cursor: pointer;
}

.invisible{
	left: -200px;
}

.derecha {
	float: right;
	line-height: 60px;
}

.principales {
	margin-right: 10px;
}

#menu_principal li:hover > a, #menu_principal li:hover > label{
	color: #fff;
	cursor: pointer;
	background-color: #64b4db;
}

nav ul li:hover > ul {
	display: inherit;
}

[id^=drop], .mif-expand-more{
	display: none;
}

@media only screen and (max-width: 560px), handheld and (orientation: landscape){
	#menu_principal li {
		margin: auto;
		height: auto;
	}

	#menu_principal {
		padding-top: 20%;
	}

	li > ul {
		position:...

JavaScript

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