En la creación de un sitio web, los menús son un elemento imprescindible. 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, dado que permite brindar al usuario un resumen de enlaces hacia nuestro contenido, ya sea agrupándolos en categorías o brindando enlaces directos a páginas importantes.
La utilidad de nuestro menú está estrechamente relacionada con su diseño. Es por eso que, en este post, te enseñaremos 2 tipos de menú y cómo dar estilo a un menú en CSS para que los usuarios de tu página naveguen con facilidad.
Menú horizontal
Este menú es muy útil cuando se trata de organizar páginas y subpáginas dentro de tu sitio web. El efecto se puede crear fácilmente usando CSS. Para crear con CSS un menú horizontal desplegable, sólo tendrás que utilizar el Administrador de Archivos de tu panel de control de alojamiento y seguir estos pasos:
Lo primero es crear un archivo HTML para tu menú
Como segundo paso crearemos un botón de menú que consiste en un menú principal y cinco submenús (la cantidad de submenú depende de las necesidades del proyecto / cliente). Puedes enlazar cada submenú a diferentes páginas de tu sitio web.
Después de tener la estructura de tu menú. Empezaremos a aplicar el CSS para crear el efecto desplegable. El menú HTML simple no es atractivo. Así que ahora, le daremos el diseño que deseamos o te hayan solicitado, según sea el caso.
Luego de darle «vida» con tu diseño. Vuelve a cargar tu sitio y verás que el menú desplegable aparece en tu sitio web.
Menú de hamburguesa
Unos de los menús más populares actualmente en algunas páginas web, es el menú de hamburguesa. Ya que va muy bien con el diseño responsive, el flujo de trabajo es el mismo que en una página web para cualquier otro dispositivo.
En este ejemplo, 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.
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.
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.
Es muy importante darle 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.
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.
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.
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. Te recomendamos nuestro curso de programación desde cero de MGPanel, ahí Podrás dominar este y otros temas en programación web. Además de pertenecer a la gran comunidad de MGPanel.