¡Hola Girl! ¿Quieres aprender como hacer un menú responsivo desde cero? En esta entrada te mostramos el código necesario para que lo hagas tu misma.
Con este artículo aprenderás como crear un menú responsivo utilizando HTML, CSS y jQuery.
Al finalizar tendrás un menú como este:
Para el desarrollo de este ejercicio nos enfocaremos en explicar el código necesario para crear un navbar, si tienes duda en alguna otra parte del código puedes dejárnosla en los comentarios.
Si más preámbulo vayamos al código y hagamos un menú responsivo con todo el ⚡POWER.
Tabla de Contenido
Estructura HTML
<!DOCTYPE html>
<html lang="es">
<head>
<link href="src/css/style.css" rel="stylesheet">
</head>
<body>
<header>
<?php include_once('include/general/navbar.php'); ?>
</header>
<!--Tu contenido-->
<script type="text/javascript" src="src/js/main.js"></script>
</body></html>Comenzaremos definiendo una estructura HTML básica, puedes observar que incluimos un css y js que usaremos más adelante para estilo y funcionalidad.
Recuerda que dentro del <body> podemos segmentar el contenido usando etiquetas específicas según el propósito, como header, main y footer.
En este ejercicio estamos trabajando un menú superior, por lo tanto, lo ideal es colocarlo dentro de la sección <header>.
Si tu proyecto es pequeño puedes colocar el siguiente código del navbar directamente en este archivo, pero si es un poco más extenso puedes crear un archivo externo e incluirlo mediante PHP usando include_once(‘ruta-de-archivo’) como se muestra en el código de arriba. ☝
Con lo anterior trabajarás un código más segmentado y organizado.
Definición de navbar
<nav class="navbar">
<div class="navbar__brand"><img src="src/img/logo.png"></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar__links">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Quiénes Somos</a></li>
<li><a href="#">Contáctanos</a></li>
</ul>
</div>
</nav>Para crear el menú usamos la etiqueta <nav>.
Iniciamos colocando un div dentro del cual ira la imagen o logo del proyecto.
Enseguida dentro de un <a> crearemos la estructura para nuestro menú de hamburguesa, las barritas son simples <span> que tomaran forma más adelante con un poco de estilo.
Si prefieres en lugar de <span> puedes incluir directamente algún icono.
Finalmente, creamos una lista usando <ul> donde cada <li> será una de las opciones en el menú.
Recuerda agregar las clases que sugerimos en cada elemento, las usaremos más adelante para el estilo y funcionamiento responsivo.
Definición de estilo
:root {
--main-color: #FF5DA2;
--white-color: #ffffff;
--pink: #FFF0F0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar__links ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar__links li {
list-style: none;
}
.navbar__links li a {
text-decoration: none;
color: var(--main-color);
padding: 1rem;
display: block;
}
.navbar__links li:hover {
background-color: #ff5da226;
}
.toggle-button {
position: absolute;
top: 2rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: var(--main-color);
border-radius: 10px;
}
@media (max-width:600px) {
.toggle-button {
display: flex;
}
.navbar__links {
display: none;
width: 100%;
background-color: var(--main-color);
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar__links ul {
width: 100%;
flex-direction: column;
}
.navbar__links li {
text-align: center;
}
.navbar__links li a {
padding: .5rem 1rem;
color: var(--white-color);
}
.navbar__links .active {
display: flex;
}
}Es momento de hacer un menú responsivo muy cool, para ello usaremos algunos estilos, hay cosas muy básicas como color de enlaces, márgenes, tamaños, etc.
En esta explicación nos enfocaremos en explicar únicamente el estilo necesario para el menú responsivo.
Comenzamos dando estilo a la clase navbar que definimos al crear el menú, simplemente usáramos flex, con justify-content haremos que los elementos tengan un espacio entre ellos y con align-items los centramos.
Enseguida a la lista que creamos dentro de navbar__links también la mostramos usando flex.
¿Recuerdas que creamos la estructura para el menú de hamburguesa?
Por medio de la clase toggle-button le definiremos su estilo, lo más importante es que tenga un display:none ya que solo aparecerá en pantallas pequeñas.
Para darle un estilo de hamburguesa a los <span> que definimos en el paso de crear el navbar le damos una altura, anchura y color.
Ahora pon mucha atención en esta parte. 👀
Definiremos una media query, las cuales nos permiten modificar o alterar la estructura de una página dependiendo de ciertas condiciones como tamaño u orientación del dispositivo.
En nuestro caso queremos crear un menú responsivo, con ayuda de una media query le diremos que cuando el ancho sea de máximo 600px cambie ciertos puntos del estilo.
Lo primero es que muestre el menú de hamburguesa que definimos con la clase toggle-button y que hasta ahora lo manteníamos oculto.
Ahora es necesario ocultar el bloque .navbar__links que mostrábamos normalmente en dispositivos con un ancho mayor a 600px, más adelante lo mostraremos con jQuery.
A la lista que creamos dentro del contenedor navbar__links definimos un ancho del 100% y lo mostramos como columnas para que la vista ahora sea vertical.
Menú de hamburguesa
var toggleButton = $(".toggle-button");
var navbarLinks = $(".navbar__links");
toggleButton.on("click", function() {
navbarLinks.slideToggle("active");
});Hasta este punto ya tienes definida la estructura y estilo, ahora es momento de hacer que funcione el menú de hamburguesa.
Usando jQuery obtendremos al los elementos toggle-button y navbar__links.
Detectamos el evento de clic en toggle-button y cuando pase mostramos el contenido de navbar__links mediante slideToggle.
De esta manera tendrías listo un menú responsivo desde cero, en este enlace puedes encontrar el código completo.
Cuéntanos que te pareció el ejercicio, ¿Tienes alguna duda o sugerencia?
No olvides compartir esta entrada en tu red social favorita para que más chicas aprendan a crear sus propios menús y desarrollen proyectos con mucho ⚡POWER.
¡Hasta pronto! 🙋♀️
