Mega menú Css. Guía de creación

Cómo realizar un mega menú en puro Css. Todo se reduce a saber posicionar (position y las propiedades de colocación) junto a una pizca de flexbox.

Mega menú Css. Guía de creación

Por Kseso ✎ 3
megamenús css

Hace unas fechas y con motivo de la revisión del artículo dedicado a los menús desplegables o drop down menu un usuario del blog, Josue Baloy, preguntaba por una variante de este tipo de menús conocida como megamenús.

A nivel de marcado Html y funcionamiento nada diferencia al mega menú del típico desplegable. Lo único distinto es que el megamenú despliega un contenido bastante mayor que el drop down y por lo general algo más variado.

La única diferencia y motivo de preocupaciones en quienes se inician con Css suele ser debida a la colocación del desplegable y su tamaño:

  • El tamaño debe ser lo suficientemente grande y flexible para alojar todo el contenido, dispar en cada opción, y mostrarse siempre accesible.
  • Su ubicación al mostrarse no puede depender del elemento que actúa como detonante para verse, por lo general un li, sino de la caja padre de todo el menú: la lista o ul

El resultado final será el que puedes ver en la siguiente demo. Al final del artículo tienes otra un poco más elaborada.

See the Pen mJyVWP by Kseso (@Kseso) on CodePen.

El marcado Html

Por lo general suele ser la típica lista desordenada ul y dentro de cada uno de sus li el texto identificativo de cada opción junto a un elemento que contendrá toda la información u opciones de segundo nivel:

<ul class='nav'> <li tabindex='1'>Opción 1 <div> <!--desplegable--> </div> </li> <!--resto del mega menú--> </ul>

Uso el atributo tabindex para facilitar la navegación por teclado ya que cada "Opción N" es texto plano.

El Css más significativo

Comencemos por preparar el campo. Un pequeño reset y trabajar con la variante del box-model tradicional box-sizing. Muy significativo el valor asignado a todos los elementos en cuanto a su position.

*, *:before, *:after { box-sizing: inherit; } * { margin:0; padding:0; border:0 none; position: relative; } html { background: #036C52; box-sizing: border-box; }

Como siempre todo comienza por definir unos valores en la caja padre, la lista, para partir de unos buenos cimientos. A estas alturas nada impide basarse en el modelo de caja flexible o flexbox para simplificar todo el trabajo de repartir equitativamente su anchura entre sus ítems sin necesidad de declararles tamaños:

.nav { background: #2AA67E; display: flex; width:100%; list-style: none; z-index: 5; }

Nada significativo en esta regla, si acaso para quienes se inicien aclarar que al declar un z-index suficientemente alto nos aseguramos que el desplegable no quedará tapado por los elementos que sigan, en el DOM, a la lista.

El siguiente paso es darle la apariencia deseada a la parte del mega menú que siempre estará visible: el texto indicativo de cada opción:

.nav > li { flex-grow: 2; position: static; padding: 1.5rem 0; text-align: center; cursor: pointer; color: #D2F2DD; }

Lo reseñable de esta regla son las tres primeras declaraciones. Especialmente la concerniente a la la propiedad position

  • flex-grow: 2; hace que el espacio sobrante de la lista se reparta por igual entre cada uno de los ítems.
  • position: static; Esta es la declaración clave para que el desplegable al mostrarse no tome como referente al 'li' que lo contiene sino a la lista o 'ul'.
  • Con el padding vertical damos la altura deseada al menú.

Pasemos a actuar sobre el contenedor de todo el mega menú, el div de nuestro código Html.

li > div { display: none; position: absolute; top: 100%; left:0; right: 0; text-align: left; height: 50vh; overflow: auto; cursor: auto; }
  • display: none; De inicio y como valor por defecto se mantiene oculto.
  • position: absolute; al sacarlo del flujo no interfiere con el resto de elementos y a la vez podemos situarlo allá donde nos interese.
  • Con las tres propiedades de ubicación usadas (top, left, right) y sus valores lo colocamos justo al pie de cada "pestaña" u opción de primer nivel (top) y con las dos restante hacemos que se posicione justo en la vertical de los dos laterales de la lista y a la vez que ocupe toda su anchura.
  • En esta demo y como este div está vacío le he dado una altura arbitraria para que sea visible. En un caso real y con contenido lo más lógico es declarar altura máxima y mínima y curarse en salud con 'overflow'

Ya está todo. Sólo necesitamos la declaración para que al pasar el cursor por cada "Opción N" se muestre el mega menú:

li:hover > div, li:focus > div { display: block; }

Hay otras declaraciones más convenientes para ocultar contenido, con vistas a la accesibilidad, que display: none;. Pero a efectos de la explicación sobre este tipo de menús creo que es un tema secundario. En cada cual está dar respuesta a esta cuestión en su realización "industrial".

Igualmenente, si las opciones son demasiadas tendrías que contemplar a partir de qué tamaño el menú se descompone y añadir los oportunos puntos de ruptura con las correspondientes @media queries.

2ª demo con animación y blur

En base a esta técnica y añadiendo un poco más de estilos puedes obtener realizaciones un poco más "vistosas". Como esta demo con la que termino el artículo. Sólo a efectos de eso, de ilustrar el post y como ejemplo:

See the Pen yNyYyO by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Más artículos sobre menús en puro Css

Por el blog andan otros post relativos a los menús. De lo más variado y casi todos con demos incluidas. Si estás interesado, en el siguiente enlace tienes una relación de algunos de ellos:

Más Artículos sobre MENÚS en puro Css

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 3

  1. Wow impresionante labor, el mejor blog de css (bueno eso digo yo)...Muchas gracias

    ResponderEliminar
  2. Gracias por este post...pero tengo una duda ¿Cómo se puede añadir en el menú un BUSCADOR como el que tú tienes en tu blog? En realidad también quiero saber ¿como añadir un buscador similar al que tienes? con esa imagen y el efecto... Saludos...

    ResponderEliminar
    Respuestas
    1. Puedes verlo tú mismo usando Firebug (en FF) u otro inspector de código.
      Sólo es un formulario, en el que la lupa (un SVG) es el label y el input pasa de una anchura a otra mayor tras el :hover con una transición.
      No tiene mayor secreto

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap