Durante el desarrollo de un sitio web, una de las partes más tediosas es la construcción de nuestro menú de navegación, el cual comúnmente suele ser el típico menú de hamburguesa. Pero en esta ocasión te traigo una alternativa al común menú de hamburguesa.
¿Qué tal amigos como están?, los saluda Jeanda 🖖 y el día de hoy les enseñaré ¡cómo crear un menú estilo app móvil!
Estructura HTML
Para la estructura tendremos nuestra etiqueta header y dentro un div con la clase wrapper, él cuál cumplirá la función de contener nuestro menú dentro de un ancho definido y no permitir que en tamaños de escritorio se vaya a los extremos de nuestra página.
Y luego tenemos una estructura básica de un menú de navegación tradicional.
<header class="header">
<div class="wrapper">
<a href="#" class="logo"><img src="img/logo-edteam.svg" alt="#" class="logo-img"></a>
<nav class="nav">
<ul class="menu">
<li class="item">
<a href="#" class="link active">
<svg class="icon"><use href="icons.svg#inicio"/></svg>Inicio
</a>
</li>
<li class="item">
<a href="#" class="link">
<svg class="icon"><use href="icons.svg#estudios"/></svg>Estudios
</a>
</li>
<li class="item">
<a href="#" class="link">
<svg class="icon"><use href="icons.svg#cursos"/></svg>Cursos
</a>
</li>
<li class="item">
<a href="#" class="link">
<svg class="icon"><use href="icons.svg#notas"/></svg>Notas
</a>
</li>
<li class="item">
<a href="#" class="link">
<img class="icon icon-image" src="img/jeanda.jpg" alt="">Perfil
</a>
</li>
</ul>
</nav>
</div>
</header>
Iconos
Lo único que hay que destacar, es que usaremos iconos SVG en nuestro menú, por lo que en nuestro archivo icons.svg colocaremos el código SVG de nuestros iconos. Si quieres aprender a armar tu propio paquetes de iconos te invito a leer este artículo: Crea tu paquete de íconos personalizado utilizando SVG
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="notas" viewBox="0 0 24 24">
<title>Notas</title>
<rect fill="none" height="24" width="24"/><path d="M19,3H4.99C3.89,3,3,3.9,3,5l0.01,14c0,1.1,0.89,2,1.99,2h10l6-6V5C21,3.9,20.1,3,19,3z M7,8h10v2H7V8z M12,14H7v-2h5V14z M14,19.5V14h5.5L14,19.5z"/>
</symbol>
<symbol id="estudios" viewBox="0 0 24 24">
<title>Estudios</title>
<path d="M0 0h24v24H0z" fill="none"/><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/>
</symbol>
<symbol id="cursos" viewBox="0 0 24 24">
<title>Cursos</title>
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z"/>
</symbol>
<symbol id="inicio" viewBox="0 0 24 24">
<title>Inicio</title>
<path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</symbol>
</svg>
Estilos CSS
Estilos generales
Primero vamos a escribir algunos estilos básicos para cualquier proyecto y declarando algunas variables de color y una variable para el tamaño de nuestro header.
/* Estilos generales */
*{
margin : 0;
padding : 0;
box-sizing: border-box;
}
:root{
--bg-nav : #1A252D;
--bg : #FBFBFE;
--blue : #59B3F3;
--grey : #A0A7AC;
--white : #FFFFFF;
--header-height: 4rem;
}
body{
background: var(--bg);
}
Estilos al header
Primero a nuestro header le daremos un ancho del 100% para que abarque a todo el ancho de nuestra web y dentro la altura que ya previamente definimos en nuestra variable CSS. También colocaremos un position: fixed y un top: 0 para que nuestro menú siempre se encuentre arriba y siempre nos siga mientras hacemos scroll.
.header{
height : var(--header-height);
width : 100%;
position : fixed;
top : 0;
background : var(--white);
border-bottom: 1px solid rgba(0,0,0,0.1);
}
Y lo único que nos hace falta es centrar nuestro logotipo. Primero le daremos una altura y un display block y para centrarla al .wrapper le daremos una altura y anchura del 100% para que herede los valores del padre .header. Después le daremos un display: flex para poder usar justify-content: center para centrarlo en el eje principal (por defecto x) y un align-items: center para centrarlo en el eje secundario (por defecto y). Y por último un max-width de 1200px para que cuando lo hagamos responsive, en un tamaño escritorio no se expanda de ese tamaño definido.
.logo-img{
height : 2rem;
display: block;
}
.wrapper{
height : 100%;
width : 90%;
max-width : 1200px;
margin : auto;
display : flex;
justify-content: center;
align-items : center ;
}
Estilos al nav
Ahora si pasando a nuestra barra de navegación primero le daremos un fondo y un ancho del 100%. Después un position: fixed y un bottom: 0 para que nos siga la barra de navegación mientras hacemos scroll y aparte que siempre se ubique hasta abajo del viewport.
.nav{
width : 100%;
position : fixed;
bottom : 0;
background: var(--bg-nav);
}
A nuestro .menu le daremos un display: flex para que nuestros elementos se ubiquen uno al lado del otro y un list-style: none esto para quitar los puntos que nos coloca al lado de nuestra lista, ya que para el menú utilizamos una etiqueta ul como contenedor.
A nuestros items le daremos un width de 25%. Pero, ¿por qué 25%? Bueno, como en nuestro menú tenemos en total 5 items pues para que cada item abarque el mismo tamaño haremos una simple división (100/5) y así es como sacamos el width de nuestros items.
.menu{
display : flex;
list-style: none;
}
.item{
width: 25%;
}
A nuestros links, primero le daremos un display block y estilos de fuente básicos, como tipo de fuente, tamaño, color, alineación. También le daremos un text-decoration: none para quitarle esa línea inferior que tienen los links por defecto y por último un padding superior e inferior de 0.5rem para que nuestro menú no se sienta apretado.
.link{
display : block;
color : var(--grey);
font-size : 0.75em;
font-family : "Raleway", sans-serif;
text-align : center;
text-decoration: none;
padding : 0.5rem 0;
}
Y lo único que nos hace falta es darles estilos a nuestros iconos. Lo primero que haremos es declarar una variable CSS para el tamaño de nuestro icono y así si en algún momento queremos cambiar el tamaño solo tenemos que cambiar el valor de la variable. También un display block, un margen inferior de 0.25rem para separarlo de nuestro link y lo último es darle un fill para poder cambiar el color de nuestro icono.
Y para poder diferenciar al item activo pues únicamente vamos a agregar un par de estilos como un color de icono y de texto distinto.
.icon{
--size : 1.5rem;
width : var(--size);
height : var(--size);
display: block;
margin : 0 auto 0.25rem;
fill : var(--grey);
}
.icon-image{
border-radius: 50%;
}
.active{
color: var(--blue);
}
.active .icon{
fill: var(--blue);
}
Responsive
Para concluir nos hace falta hacer responsive a nuestro menú. Entonces para iniciar a nuestro .wrapper le daremos un justify-content: space-between para que nuestro logo y nuestro menú se vayan a un extremo cada uno, luego al .nav cambiaremos su width a max-content para que abarque justo lo que necesite, un position relative para que deje de seguir el menu y un align-items center para centrar nuestros items en el eje secundario (por defecto Y).
/* Responsive */
@media only screen and (min-width: 1024px){
.wrapper{
justify-content: space-between;
}
.nav{
width : max-content;
height : var(--header-height);
position : relative;
display : flex;
align-items: center;
background : none;
}
.item{
margin-left: 1.5rem;
}
.link{
font-size: 0.9rem;
}
.icon{
display: none;
}
}
Demo
https://codepen.io/JeandaHerrera/pen/ExKYdeO
Conclusiones
Este menú sin duda llama la atención a primera vista, pero tiene sus cosas positivas y negativas. Lo positivo es que es muy vistoso y muy bonito, también que tienes la navegación de la web al alcance de tu pulgar de una manera muy sencilla. Y la negativa es que este tipo de menús se recomienda usar con un mínimo de 3 items y un máximo de 5 items, por lo tanto tenemos esa pequeña limitación al momento de implementar este menú.
Soy Jeanda y los estaré viendo en un próximo articulo 🖖.
Aprende a usar los módulos avanzados de CSS con casos prácticos y diseña sitios web hermosos y profesionales para tus clientes. Puedes ver la 1° clase del curso ¡GRATIS 🎁! https://ed.team/cursos/css-avanzado
