soy Kseso y esto EsCSS

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 a su '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".

Igualmente, 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

avatar del Editor del blog
the obCSServer ᛯ 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 Kseso