Menu responsive

Los menus responsive se pueden crear solo con CSS, utilizando el input checkbox

by InaWeb

HTML

<label for="mostrar-menu" class="mostrar-menu">Mostrar Menu</label>
	<input type="checkbox" id="mostrar-menu">
		<ul id="menu">
		<li><a href="#">Inicio</a></li>
		<li>
			<a href="#">Nosotros</a>
		</li>
		<li><a href="#">Noticias</a></li>
		<li><a href="#">Contactos</a></li>
	</ul>

CSS

ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

li {
	display:inline-block;
}

li a {
	display:block;
	min-width:140px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	background: #2f3036;
	text-decoration: none;
  transition:all 0.5s ease;
}

li:hover a {
	background: #EC9299;
}


li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}


li:hover ul a:hover {
	color: #fff;
}

.mostrar-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #EC9299;
	text-align: center;
	padding: 10px 0;
	display: none;
  transition:all 0.5s ease;
}
input[type=checkbox]{
    display: none;
}


input[type=checkbox]:checked ~ #menu{
    display: block;
}

@media screen and (max-width : 760px){
	ul {
		display: none;
	}

	li {
		margin-bottom: 1px;
	}

	ul li, li a {
		width: 100%;
	}

	.mostrar-menu {
		display:block;
	}
}