Trucos CSS: Crea un menú estilo app

La mayoría de sitios web tienen el típico menú hamburguesa. Si quieres darle una mejor apariencia a tu web y ofrecerle una buena experiencia al usuario, ¡haz este menú estilo app!

Diseño web
Lectura de 8 minutos
10 ago. 2020
Trucos CSS: Crea un menú estilo app

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.

1 <header class="header">
2 <div class="wrapper">
3 <a href="#" class="logo"><img src="img/logo-edteam.svg" alt="#" class="logo-img"></a>
4 <nav class="nav">
5 <ul class="menu">
6 <li class="item">
7 <a href="#" class="link active">
8 <svg class="icon"><use href="icons.svg#inicio"/></svg>Inicio
9 </a>
10 </li>
11 <li class="item">
12 <a href="#" class="link">
13 <svg class="icon"><use href="icons.svg#estudios"/></svg>Estudios
14 </a>
15 </li>
16 <li class="item">
17 <a href="#" class="link">
18 <svg class="icon"><use href="icons.svg#cursos"/></svg>Cursos
19 </a>
20 </li>
21 <li class="item">
22 <a href="#" class="link">
23 <svg class="icon"><use href="icons.svg#notas"/></svg>Notas
24 </a>
25 </li>
26 <li class="item">
27 <a href="#" class="link">
28 <img class="icon icon-image" src="img/jeanda.jpg" alt="">Perfil
29 </a>
30 </li>
31 </ul>
32 </nav>
33 </div>
34 </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

1<svg xmlns="http://www.w3.org/2000/svg">
2
3 <symbol id="notas" viewBox="0 0 24 24">
4 <title>Notas</title>
5 <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"/>
6 </symbol>
7
8 <symbol id="estudios" viewBox="0 0 24 24">
9 <title>Estudios</title>
10 <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"/>
11 </symbol>
12
13 <symbol id="cursos" viewBox="0 0 24 24">
14 <title>Cursos</title>
15 <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"/>
16 </symbol>
17
18 <symbol id="inicio" viewBox="0 0 24 24">
19 <title>Inicio</title>
20 <path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
21 </symbol>
22
23</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.

1/* Estilos generales */
2*{
3 margin : 0;
4 padding : 0;
5 box-sizing: border-box;
6}
7
8:root{
9 --bg-nav : #1A252D;
10 --bg : #FBFBFE;
11 --blue : #59B3F3;
12 --grey : #A0A7AC;
13 --white : #FFFFFF;
14 --header-height: 4rem;
15}
16
17body{
18 background: var(--bg);
19}

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.

1.header{
2 height : var(--header-height);
3 width : 100%;
4 position : fixed;
5 top : 0;
6 background : var(--white);
7 border-bottom: 1px solid rgba(0,0,0,0.1);
8}

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.

1.logo-img{
2 height : 2rem;
3 display: block;
4}
5
6.wrapper{
7 height : 100%;
8 width : 90%;
9 max-width : 1200px;
10 margin : auto;
11 display : flex;
12 justify-content: center;
13 align-items : center ;
14}

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.

1.nav{
2 width : 100%;
3 position : fixed;
4 bottom : 0;
5 background: var(--bg-nav);
6}

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.

1.menu{
2 display : flex;
3 list-style: none;
4}
5
6.item{
7 width: 25%;
8}

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.

1.link{
2 display : block;
3 color : var(--grey);
4 font-size : 0.75em;
5 font-family : "Raleway", sans-serif;
6 text-align : center;
7 text-decoration: none;
8 padding : 0.5rem 0;
9}

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.

1.icon{
2 --size : 1.5rem;
3 width : var(--size);
4 height : var(--size);
5 display: block;
6 margin : 0 auto 0.25rem;
7 fill : var(--grey);
8}
9
10.icon-image{
11 border-radius: 50%;
12}
13
14.active{
15 color: var(--blue);
16}
17
18.active .icon{
19 fill: var(--blue);
20}

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

1/* Responsive */
2@media only screen and (min-width: 1024px){
3
4 .wrapper{
5 justify-content: space-between;
6 }
7
8 .nav{
9 width : max-content;
10 height : var(--header-height);
11 position : relative;
12 display : flex;
13 align-items: center;
14 background : none;
15 }
16
17 .item{
18 margin-left: 1.5rem;
19 }
20
21 .link{
22 font-size: 0.9rem;
23 }
24
25 .icon{
26 display: none;
27 }
28}

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

CSS Avanzado

Avatar

Jeanda Herrera

@jeandaVer perfil

Fundador de Jeanda 🐦. Emprendedor. Diseñador UX/UI en EDteam.

Comentarios de los usuarios

JR
José Ruiz

@joseruiz370

Excelente!

Avatar
Enzo Tribiani

@enzotribiani

Donde lo puedo ver funcionando ?

Recuerda iniciar sesión para comentar este articulo

Cursos recomendados

CSS Avanzado

CSS Avanzado

Avatar

Alexis Mora Angulo

5

4.9

CSS desde cero (2020)

CSS desde cero (2020)

Avatar

Alvaro Felipe

5

4.9

Variables CSS

Variables CSS

Avatar

Alvaro Felipe

5

4.9

EDy flotante