soy Kseso y esto EsCSS

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

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