Mi Enfoque.
Para maximizar tu curva de aprendizaje, es esencial dedicar tiempo a la práctica. Por eso, quiero compartir contigo mi enfoque en la creación de un menú responsive, una habilidad que encuentras frecuentemente en tu día a día. Aunque existen librerías que simplifican este proceso, es fundamental comprender las bases y razones detrás de cada decisión.
No poseo la verdad absoluta, pero quiero ofrecerte mi perspectiva en la creación del menú. Mi objetivo es que tomes el código, lo practiques y busques maneras de mejorarlo. Este proceso es la esencia de mi aprendizaje, y aunque te pueda generar temor modificar el código, considero que es la mejor manera de expandir tus habilidades y conocimientos. ¡Anímate a explorar, experimentar y crecer junto con el código!»
Me adentraré en la creación de un menú responsive utilizando únicamente HTML y CSS en esta ocasión. En futuras ocasiones exploraremos la creación de otro menú utilizando Javascript, pero por ahora nos centraremos en esta primera opción. Es importante recordar que mi enfoque es personal, sin embargo, te guiaré minuciosamente a través del proceso explicando detalladamente por qué diseño el código de esta manera, para que podamos comprender completamente cada paso del proceso.
Es crucial comprender que la barra de navegación constituye un componente esencial en la interfaz de usuario, simplificando la navegación a través de nuestras páginas web. Su relevancia es innegable, dado que está integrada en el estándar HTML. No obstante, para muchos programadores, la tarea de programar esta sección fundamental de una página web puede parecer un tanto engorrosa, especialmente al principio. Por lo tanto, te invito a observar mi enfoque y analizarlo detenidamente para que puedas aprender y perfeccionar tus habilidades en este aspecto.
Paso 1: Diseño y Boceto Mental.
Una Vista General: Antes de sumergirme en el código, lo primero que hago es visualizar en mi mente mi objetivo. Para mi menú, que comenzaré hacerlo mobile first, quiero un botón hamburguesa que, al hacer clic, despliegue las opciones, la dirección del desplazamiento no es crucial en este momento, ¡exploraré diferentes opciones más adelante! Dicho botón estará en el lado superior derecho alineado con el logo (cualquiera) al lado izquierdo.
Comenzaré con un enfoque «Mobile First» ya que ofrece ventajas significativas y ¿Por qué comienzo por Mobile First? Al diseñar para dispositivos móviles primero, aseguramos una experiencia sólida en pantallas más pequeñas y facilitamos la expansión para tamaños más grandes. ¡Piensa en ello cómo construir desde la base hasta las alturas! y también debes recordar que un alto porcentaje de visualizaciones primeramente se hace desde un dispositivo móvil.
Estructura HTML.
Pues bien! comencemos sin más y vayamos a la parte que nos apetece, comencemos con la estructura en el html:
<header>
<input type="checkbox" id="btn-menu">
<label for="btn-menu" class="icon-menu"></label>
<h2>LOGO</h2>
<nav class="menu">
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Nosotros</a></li>
<li><a href="">Servicios</a></li>
<li><a href="">Portafolio</a></li>
<li><a href="">Contactanos</a></li>
</ul>
</nav>
</header>Desglose.
Te explico a continuación mi estructura:
<header>: Este es un elemento de encabezado HTML que se utiliza para agrupar el contenido relacionado con la cabecera de la página. En este caso, contiene el logotipo, el botón del menú y la barra de navegación.
<input type=»checkbox» id=»btn-menu»>: Aquí, cree un elemento de entrada (<input>) de tipo checkbox. Este checkbox actuará como el interruptor para mostrar u ocultar el menú. La propiedad id establece un identificador único para este elemento, llamado «btn-menu«. El atributo type=»checkbox» significa que el elemento es un checkbox.
<label for=»btn-menu» class=»icon-menu»></label>: Este elemento <label> está asociado al checkbox mediante el atributo for=»btn-menu». Cuando el usuario hace clic en esta etiqueta, activa el checkbox. La clase «icon-menu» se utiliza para aplicar estilos o referencias en CSS.
<h2>LOGO</h2>: Este es un encabezado de nivel 2 (<h2>) que muestra el texto «LOGO». Puedes reemplazarlo con tu propio logotipo o texto.
<nav class=»menu»>: Aquí, cree un elemento de navegación (<nav>) y le asigne la clase «menu». Esto ayuda a aplicar estilos específicos a la barra de navegación en el CSS.
<ul>: Este elemento <ul> representa una lista no ordenada. En este caso, lo utilizo para contener los elementos de la barra de navegación.
<li><a href=»#»>Inicio</a></li>: Cada elemento de la lista (<li>) representa un ítem de la barra de navegación. Dentro de cada ítem, hay un enlace (<a>) con el texto «Inicio» y un atributo href=»#». El «#» en el atributo href se usa comúnmente para indicar un enlace de «anclaje» en el mismo documento, aunque en este caso no se ha proporcionado un destino específico.
Estructura Css.
Ahora bien, déjame desglosar el código CSS paso a paso para entender cada parte.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
font-weight: 300;
}
header {
width: 100%;
height: 80px;
background-color: #000;
display: flex;
justify-content: space-between;
align-items: center;
}
header input {
display: none;
}
header label {
padding: 30px;
font-size: 25px;
display: block;
display: none;
color: #fff;
}
header h2 {
color: #fff;
width: 20%;
text-align: center;
cursor: pointer;
}
header .menu {
width: 80%;
height: 80px;
padding-right: 60px;
top: 0;
}
header .menu ul {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
header .menu ul li {
list-style: none;
line-height: 70px;
padding-right: 15px;
}
header .menu ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
color: #fff;
}
header .menu ul li a:hover {
border-bottom: 1px solid #fff;
}Esta estructura brinda los estilos del menú y desglosa por completo como se verá el menú es nuestra web. Sin embargo, la magia y el truco radica en el siguiente código de CSS:
@media screen and (max-width: 700px) {
header .menu {
width: 100%;
height: 100vh;
top: 80px;
position: absolute;
align-items: flex-start;
padding: 5px 30px;
transform: translateX(-100%);
transition: all 1s ease;
background-color: #000;
opacity: 0.9;
}
header h2 {
padding-left: 10%;
}
header .menu ul {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
header .menu ul li {
width: 90%;
border-bottom: 1px solid #fff;
}
header .menu ul li a {
color: #fff;
}
header label {
display: block;
color: #fff;
z-index: 1;
position: absolute;
top: 0;
left: 70%;
}
#btn-menu:checked ~ .menu {
transform: translateX(0)
}Esta parte del código es donde utilizo los media queries para aplicar estilos específicos cuando la pantalla tiene un ancho máximo de 700px (pantallas pequeñas, como dispositivos móviles). Aquí es donde hacemos que nuestro menú sea responsive y animado:
- Ajusto el ancho, la altura y la posición del menú.
- Cambio la dirección de la lista de navegación a una columna.
- Agrego un efecto de borde inferior a los enlaces al pasar el ratón sobre ellos.
- Muestro el botón de menú y ajusto su posición.
La parte clave aquí es #btn-menu:checked ~ .menu, que selecciona el menú cuando el checkbox del botón de menú está marcado. Al hacer clic en el botón, se activa la transición que mueve el menú desde la posición fuera de la pantalla (transform: translateX(-100%)) hacia la posición original (transform: translateX(0)).
Ahora que tienes un modelo para seguir sobre cómo crear un menú responsive design sin JavaScript, te animo a programar, mejorar y, si es necesario, hasta romper el código. La práctica constante es clave para seguir creciendo en tus habilidades. Recuerda que el objetivo es convertirte en la mejor versión de ti mismo. El código tiene el poder de cambiar el mundo, y tú puedes ser parte de esa transformación.
