Menú con hamburguesa o con botón desplegable sin Javascript

2 minutos

Menu hamburguesa

Es fácil recurrir a Javascript o a JQuery cuando queremos realizar ciertas acciones dinámicas. Como, por ejemplo, hacer un botón que muestre un menú en smartphone (o móvil). Pero olvidamos el potencial que hay detrás de CSS3. Con un poco de Flex, CSS3 y usando un truco con focus, podremos conseguirlo sin usar nada de Javascript. Sin Plugins, totalmente nativo.

HTML5

Primero definimos un menú sencillo con listas desordenadas y la etiqueta nav.

<button id="menu">menu</button>
<nav id="superior">
	<ul>
		<li><a href="#">Lorem</a></li>
		<li><a href="#">Lorem</a></li>
		<li><a href="#">Consectetur.</a></li>
		<li><a href="#">Elit</a></li>
		<li><a href="#">Elit.</a></li>
	</ul>
</nav>

CSS3

Y realizamos nuestro CSS. Aquí dejo la Versión comentada, para que podáis entender porque funciona.

button#menu {
	/* Ocultamos el boton en escritorio */
    display: none;
}

button#menu:focus + nav#superior {
	/* Si es pulsado el boton, mostramos el nav.
	Esto lo puedo hacer porque adquiere el foco.
	Solo funcionará, si el botón y el menú esta a la misma altura. */
    display: block;
}

nav#superior ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav#superior ul a {
    display: block;
    width: 8em;
    text-decoration: none;
    border: 1px solid #BE353D;
    padding: .3em 0;
    text-align: center;
    color: #FA453B;
    background: #EF8E76;
    transition: 1s all;
}

nav#superior ul a:hover {
    background: #ec7b5f;
}

@media all and (max-width: 700px) {
	/* En smartphone mostramos el botón */
    button#menu {
        display: block;
    }
	nav#superior {
        display: none;
    }
	nav#superior ul {
        flex-direction: column;
    }
}

Ahora sin comentar, para que podáis copiarlo.

button#menu {
    display: none;
}

button#menu:focus + nav#superior {
    display: block;
}

nav#superior ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav#superior ul a {
    display: block;
    width: 8em;
    text-decoration: none;
    border: 1px solid #BE353D;
    padding: .3em 0;
    text-align: center;
    color: #FA453B;
    background: #EF8E76;
    transition: 1s all;
}

nav#superior ul a:hover {
    background: #ec7b5f;
}

@media all and (max-width: 700px) {
    button#menu {
        display: block;
    }
	nav#superior {
        display: none;
    }
	nav#superior ul {
        flex-direction: column;
    }
}

Extra: con SASS

Si usáis un generador como SASS, os dejo una replica adaptada.

$color_limon: #EF8E76;
$color_pear: #BE353D;
$color_rumi: #FA453B;
$media_tablet: 700px;

button#menu {
	display: none;
	@media all and (max-width: $media_tablet) {
		display: block;
	}
	&:focus + nav#superior {
		display: block;
	}
}

nav#superior {
	@media all and (max-width: $media_tablet) {
		display: none;
	}
	ul {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		@media all and (max-width: $media_tablet) {
			flex-direction: column;
		}
		a {
			display: block;
			width: 8em;
			text-decoration: none;
			border: 1px solid $color_pear;
			padding: .3em 0;
			text-align: center;
			color: $color_rumi;
			background: $color_limon;
			transition: 1s all;
			&:hover {
				background: darken($color_limon, 5%);
			}
		}
	}
}

¡Suerte!

Actualización

Dispones de otro ejemplo de menú más completo y moderno: Menú completo Responsive Design para Escritorio y Móvil/Celular.

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?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

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...