Crear un menú con Flex y CSS3 Parte 2 | Programador Web Valencia

Crear un menú con Flex y CSS3 Parte 2

1 minuto

En esta segunda parte partimos del código de la primera parte . menu desplegable Cuando la pantalla sea inferior a 500px conseguiremos que se oculte el menú y se muestre un botón. menu desplegable Al pulsar, haremos que se muestre el menú en columna aprovechando el evento focus. ¡Sin usar javascript y totalmente nativo! menu desplegable El código quedaría tal que así. 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		nav#main ul {
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0;
		}
		
		nav#main li {
			flex-grow: 1;
		}

		nav#main ul li a {
			display: block;
			color: black;
			text-decoration: none;
			height: 100%;
			width: 100%;
			text-align: center;
			background-color: green;
			border: 1px solid black;
		}

		nav#main ul li a:hover {
			color: white;
		}

		#openNav {
			display: none;
		}
		@media only screen and (max-width: 500px) {
			nav#main ul {
				flex-direction: column;
				display: none;
			}
			#openNav {
				display: block;
			}
			#openNav:focus + nav#main ul {
				display: block;
			}
  		}
	</style>
</head>
<body>
	<button id="openNav">Open</button>
	<nav id="main">
		<ul>
			<li>
				<a href="#">Lorem.</a>
			</li>
			<li>
				<a href="#">Commodi.</a>
			</li>
			<li>
				<a href="#">Facere?</a>
			</li>
			<li>
				<a href="#">Impedit!</a>
			</li>
		</ul>	
	</nav>
</body>
</html>
Cualquier duda que tengan pueden dejarme en un comentario. Gracias.
HTML5

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...

thumbnail

Cómo formatear una etiqueta HTML
thumbnail

Los Diseñadores Web los agrupo en 4 niveles
thumbnail

Las 5 cualidades que he observado entre mis mejores alumnos