Cómo dar estilo a un menú en CSS

Autor: | Última modificación: 10 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

Los menús son un elemento imprescindible a la hora de crear una página web, ya que permiten al usuario navegar por las distintas páginas del sitio web y le dan una guía de cómo está dividida. Además, como sucede con todos los aspectos del desarrollo web, la utilidad de nuestro menú está estrechamente relacionada con su diseño. Por ello, en este post, te enseñaremos cómo dar estilo a un menú en CSS para que los usuarios de tu página naveguen con facilidad.

El menú de hamburguesa

En este post trabajaremos con un menú de hamburguesa en su estado activo; es decir, diseñaremos el menú cuando se revela ante el usuario al clicar sobre el icono de hamburguesa. Aunque el ejemplo con el que estaremos trabajando es un diseño para una página web en dispositivo móvil, el flujo de trabajo es el mismo que en una página web para cualquier otro dispositivo.

Por tanto, este será un menú pegado a la barra de navegación superior y al borde izquierdo de la página web. Además, como estamos diseñando el menú en su estado activo, queremos que este se encuentre encima de todos los demás elementos de la página web pero que no ocupe el ancho máximo del viewport.

Antes de entrar en materia y hablar sobre dar estilo a un menú en CSS, puedes ver el resultado final:

Cómo dar estilo a un menú en CSS 1

¿Cómo dar estilo a un menú en CSS?

Antes de dar estilo a un menú en CSS, te recomendamos empezar por darle un color de fondo a tu lista de elementos. Un menú es realmente una lista de enlaces y, en nuestro caso, hemos nombrado esta lista con el atributo de clase «.navbar-list». Usando su selector de clase, le hemos insertado la propiedad de color black. Darle un color de fondo a tus elementos en bloque te permite saber exactamente dónde se encuentran y qué espacio están ocupando. Podrás cambiar este color en cualquier momento del diseño, lo importante es que resalte mientras ajustas las demás propiedades.

La segunda propiedad que determinaremos para dar estilo a un menú en CSS es la posición. Te invitamos a leer nuestro post sobre el posicionamiento de elementos en CSS si tienes dudas sobre cómo funciona. Le vamos a otorgar una posición fixed a nuestro menú para que se quede fijo aunque movamos el cursor por la página web. Además, insertaremos un valor z-index alto (99) para asegurar que este elemento HTML estará por encima de todos los demás elementos de la página web.

Ten en cuenta que, para que nuestro menú esté pegado a la barra de navegación, deberemos insertarle una propiedad top con la altura de la barra de navegación. De esta forma, se distanciará del borde superior de la página exactamente lo que mide el elemento de la barra de navegación. Si descubres que tu menú no está siguiendo estas distancias y que cuando le pones top 0 no está realmente pegado al borde superior, te recomendamos revisar su modelo de caja en tu inspector. Seguramente encontrarás que tu elemento tiene un margen, padding o borde por defecto que debes eliminar. Puedes hacerlo indicándole un valor 0 a estas propiedades en el selector de clase.

Para determinar el ancho del menú utiliza medidas relativas o absolutas en la propiedad width. Aquí puedes revisar los tipos de unidades de medida en CSS. Para determinar el alto del menú de navegación, debes insertar una propiedad bottom de 0px. Esto hará que el borde inferior de nuestro menú de navegación esté completamente pegado al borde inferior de la página web. Ocupará la totalidad del largo de la página, a excepción de la distancia hasta el borde superior que le otorgues.

Así es como, con tan solo unas cuantas propiedades en un selector de clase, se puede dar estilo a un menú en CSS. Aunque los valores que te damos en este ejemplo pueden variar, te ayudarán a ubicar y fijar tu menú dentro de tu página web.

¿Cuál es el siguiente paso?

Ahora que sabes cómo dar estilo a un menú en CSS, ¡estás listo para aplicarlo a tu propia página web!. Sin embargo, aún queda mucho por aprender sobre las posibilidades de diseño que tiene CSS. Para continuar con tu formación, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás mucho más sobre CSS y su compañero HTML. ¡Inscríbete!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!