Menú desplegable con zona activa de seguridad (foco) ampliada

Actualizado y ampliado el 27/09/2015. Original publicado en Enero de 2013
Ejemplos para ampliar la zona del focus en menús desplegables más allá de los items mostrados para evitar su cierre inesperado y otros artículos más sobre los menús y su icono asociado.

Menú desplegable con zona activa de seguridad (foco) ampliada

Por Kseso ✎ 11
Menú desplegable con zona activa de seguridad (foco) ampliada

Una de las características más molestas de los desplegables (dropdown menu) es que si tu cursor se sale un solo px de la opción se cierran, dejándote con cara de "¿y...?". Más molesto y antifuncional cuantos más subniveles hayas desplegados.

Efecto que se agrava en algunas realizaciones que no son "pixel perfect" y una de dos, o eres hábil con el ratón o se cierran antes de atraparlas con el foco.

Los ejemplos que te muestro solventan ese efecto, pues añaden una zona de seguridad (focus extendido) alrededor del desplegable, de tal forma que, aunque se salga el cursor de los items desplegados, no se ocultan.

tuits @chriscoyier y @paul_irish

Como puedes ver en la imagen anterior, que sirve como crédito al origen, al tuit de @chriscoyier comentando una realización (en codepen.io) que solventa lo anterior, le respondió @paul_irish con un ejemplo ¡de 2006!.

Deluxe CSS Dropdowns and Flyouts

Deluxe CSS Dropdowns and Flyouts

En este artículo no vamos a entrar afondo en los código, más que nada porque el autor lo tiene extensamente comentado en la realización.
Si optas por ver el código Css de este ejemplo te encontrarás con casi todas las reglas Css con su correspondiente comentario explicativo.

Detalle funcionamiento Deluxe CSS Dropdowns and Flyouts

Por si tienes dudas, sólo comentar que el espacio extra para el focus alrededor de los items se consigue en base a añadir elementos extra en el marcado html.

Como puedes ver en la imagen adyacente, cada lista ul de opciones está contenida en un div (que he coloreado) mayor que la propia lista. Y son estos div´s los que reciben el foco y mantiene visible la lista. Así que no pasa nada porque el cursor salga de ella mientras permanezca dentro del div.

CSS3 Dropdown Menu por John Gardner

En esta segunda realización de Jonh Gardner, aunque con distinto marcado html, el resultado es el mismo. Abajo a la derecha del pen se entrevé un checkbox. Márcalo para visualizar un borde de 1px de los div´s extra que hacen posible la zona extra de seguridad para el focus.

Como ya he dicho otras veces, las limitaciones de Css no están en lo que sus especificaciones establecen sino en la imaginación y creatividad al usarlas.

Artículos y Demos relacionados

La cuestión de los menús desplegables o drop down y cómo no liarse

No hay nada más sencillo de construir que un menú desplegable. Y más sencillo aún hacerlo plénamente funcional sólo con Css. Y de cómo lograrlo va este artículo.

La cuestión de los menús desplegables o drop down y cómo no liarse

Mega menú Css

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

Menú Css en hexágono con zona activa del enlace sin sobrepasar su perímetro

Menú Css en hexágono con zona activa del enlace sin sobrepasar el perímetro

Tutorial paso a paso para construir un menú con enlaces en forma de hexágonos en los que la zona activa no se extiende más allá de los límites de cada hexágono.

Menú Css en hexágono con zona activa del enlace sin sobrepasar su perímetro

RWD droUpDown Menu animado puro Css

Un dropdown menú RWD y animado tanto su despliegue y repliegue como su "icono" indicador

RWD droUpDown Menu animado puro Css

Menú deslizante letra a letra y opción tras opción

Demo de un menú en el que las opciones se despliegan una tras otra y letra tras letra. Con plegado inverso al despliegue.

Menú deslizante letra a letra y opción tras opción

☰ Navicon "3 líneas" semántico y RWD para el menú de navegación

Uso del navicon de 3 líneas como icono de navegación (hamburger menu). Varias formas semánticas y RWD de lograrlo: imag, html entity (trigram chino), puro css.

☰ Navicon "3 líneas" semántico y RWD para el menú de navegación

Navicon: del trigram ☰ al aspa X

Animando el cambio del icono ☰ al X con transiciones Css y su menú de navegación asociado,

Navicon: del trigram ☰ al aspa X

ilustración de gatos para cerrar el artículo

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: 11

  1. Anónimo8/1/13

    Muy bueno Kseso.

    Los menús desplegables siempre se han podido hacer con HTML + CSS sin recurrir a JS, sólo hubo problemas en IE 6 con el :hover aplicado a elementos no anchors, pero aún así tiene solución.

    ResponderEliminar
  2. Sí. Efectivamente.
    Y uno de los recursos era crear falsas tablas y un montón de comentarios condicionales. Fueron muy mentados y utilizados los menús de Mike Morote en su página araudi.net.

    Pero este artículo versa sobre otra particularidad. Ya sean desplegables con html+css puro o ayudado de js, y que afecta a ambos: ampliar la zona "sensible" más allá del propio enlace/lista.

    Gracias por tu visita y tu opinión.

    ResponderEliminar
  3. Anónimo8/1/13

    Por cosillas así de tontunas pero realmente útiles me gusta siempre pasarme por aquí.

    ResponderEliminar
  4. Anónimo8/1/13

    Anonimo ---> ["Por cosillas así de tontunas..."]

    Lo que hay que oir y leer. Que una manera de faltar al respeto del autor del blog y de quienes lo seguimos.
    Tontuna la que tu has escrito.

    ResponderEliminar
  5. Anónimo10/1/13

    Falta de respeto ninguna, sensibilidad del lector más bien. Tontunas no es más que una forma simpática de decir simples. Y simple, antes de que te pueda sonar a ofensa también, sólo significa no complejo.
    Bueno, espero haber aclarado el malentendido.

    ¡A ser felices pues!

    ResponderEliminar
  6. Lo último que me apetece y estoy dispuesto a tener en el blog es un flame de anónimos.
    Y mucho menos con un tema ajeno a su temática.
    Tengamos el blog en paz.

    ResponderEliminar
  7. buscaba solución a otro prolema pero descubrí esto, que gran idea! muchas gracias, a veces cuando navegas en menus con muchos subapartados (como tiendas online) acabo enrabiada de abrir y re abrir menus continuamente. voy a evitar que les pase esto a mis internautas gracias a ti/vosotros.
    gracias :)

    ResponderEliminar

  8. Espero que te llevases el 2x1, V.Cabezos. Lo que buscabas y éste.

    Esa es la idea del blog (unipersonal): que algo sirva de algo de cuando en vez a alguien xD

    Un saludo.

    ResponderEliminar
  9. excelente tu blog, te felicito y animo a que sigas publicando temas tan utiles!!!

    ResponderEliminar
  10. ¿se podría hacer usando :before y :after para evitar añadir elementos html cuando estos sean poco o nada modificables?

    ResponderEliminar
    Respuestas
    1. Y me auto contesto, si se puede, lo que está bien si no se quiere/puede tocar el menú.

      Eliminar

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