Alternativa pure CSS al hamburger menú 7.9.17

Alternativa pure CSS al hamburger menú

Los menús de múltiples items de primer nivel siempre han supuesto un pequeño desafío a poco que su número de elementos crezca.

Tradicionalmente esto no solía suponer mayor problema que no impedir que se formase una segunda línea para mostrar los que no tenían cabida en la primera.

Esto fue así hasta la llegada de los aparatos de reducidas dimensiones. A pocos que sean en número, debido a que hay que ser generosos en su tamaño para evitar pulsaciones no deseadas sobre el elemento equivocado, cubrirán la práctica totalidad del viewport cargado en primer lugar. Ni práctico ni estético.

Hamburger menu: inconvenientes

Una de las soluciones propuestas que más éxito ha tenido para lidiar con esta cuestión es el conocido como hamburger menu.

Pero el concepto mismo y presentación del hamburger menu no ha dejado de tener sus detractores y críticas desde antes, incluso, de que se extendiese esta denominación.

Cuando aún se le referenciaba como trigram, navicon, three line menu, étc, tres eran los aspectos que se le solían afear:

1. La diversidad de símbolos usados indicar que "aquí hay más opciones".
2. La discutida semántica de todos ellos.
3. El hecho de que se mostrase "plegado" con independencia del espacio disponible en su línea y el único elemento indicador fuese su icono. Esto es, insensible al tamaño del viewport.
4. Los recursos asociados a él (en algunas realizaciones).

Alternativa al hamburger menu

Debido a lo anterior y alguna que otra cuestión más no ha dejado de buscarse una alternativa al hamburger menu para lidiar de forma más efectiva con los menús cuyos ítems fuerzan la creación de más de una línea.

Una de las que más está calando es el presentar las opciones que quepan en una sola línea, ocultar las restantes cuando las haya y de haberlas mostrar un elemento que así lo indique:

Este concepto lo puedes ver en múltitud de páginas, como en el menú superior en la web de la BBC.

Si eres de los de jQuery for all estás de suerte, en github tienes okayNav jQuery Plugin (y en codepen un ejemplo).

Alternativa puro CSS al hamburger menu

Pero estás en un blog de #impoCSSibles. Así que no esperes otra cosa más que la simple referencia a ese plugin y a partir de aquí me centre en una construcción de este tipo de menú realizado en puro CSS.

See the Pen CSS only priority navigation by Kseso (@Kseso) on CodePen.

Ver Demo y Redimensionar Ventana

Una pequeña explicación

El Html no deja de ser un menú formado con una lista desordenada ul a la que se le añaden al final dos items: uno para desplegar todas las opciones cuando no caben en una línea y otro para cerrar ese desplegable.

En base de toda la construcción están dos técnicas viejas conocidas de este blog:

1. El uso de :target para mostrar y ocultar la lista y todas sus opciones [ver :target] y
2. Para mostrar o no el indicador de que hay items ocultos la misma que usaba y explicaba en los artículos:
   • Text-overflow: ellipsis en cualquier línea elegida a voluntad
   • Reverse ellipsis multiline

Creo que sobre la primera (uso de :target) no es necesario entrar. Si lo necesitas sólo es cuestión de que consultes alguno de los muchos posts de este blog dedicados a esta pseudoclase.

Mostrar el `Hic sunt dracones´ sólo cuando los haya

Mostrar el ítem que indica que hay más opciones que las mostradas sólo cuando queda alguna oculta es sencillo:

1. En primer lugar fijamos la altura de nav al valor que deseemos y evitamos que se genere la 2ª línea con overflow: hidden. Esta altura es la misma que la de los ítems y sus enlaces.
2. Fijamos una altura máxima max-height de la lista del doble de la altura de nav
3. Ubicamos el ítem de hay más ítems de forma absoluta a la derecha y respecto al fondo un valor igual a la altura del nav.

Estos tres puntos hacen que si las opciones del menú caben todo en una sola línea el ítem hay más opciones se coloque justo por encima del borde superior de nav y que al pasar alguna opción a la segunda línea la lista pasa tener dos veces la altura de nav y por lo tanto este ítem se dibuja dentro del nav y es visible.

Y a partir de estos estilos que controlan la parte funcional sólo queda por añadir alguna que otra declaración para que luzca al gusto de cada cual.

Créditos

Como podrás ver a poco curioso que seas y mires el pen con la demo verás que es un fork (variación) del publicado por el usuario de Codepen Ola ya hace algunas fechas (Febrero de 2016).

Kseso

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