Hover Intent moderno en menues dropdown

7/May/2015 174

La utilidad (y poca accesibilidad) de los menúes dropdown son conocidos e incuestionables. Pero existe un pequeño problema cuando el usuario navega sobre ellos, el cual se puede apreciar a continuación:

Ejemplo 1 Hover Intent moderno en menues dropdown | CSSLab.cl

El Problema

Vemos que cuando se pasa el mouse sobre los elementos que gatillan los paneles se sobreponen a lo que está debajo de ellos si el movimiento es lo suficientemente rápido. No es un comportamiento crítico pero la solución es tan simple que mejor es tenerla siempre presente.

Como sabemos la construcción de un menú dropdown (un elemento que contiene sub-elementos que son desplegados sólo cuando el usuario pasa el mouse sobre el elemento padre) no es más que un cambio en el pseudo-estado :hover. Si está sobre el elemento muestra los sub-elementos, si no, vuelve a esconderlos.

El HTML base:

<ul class="nav">
  <li>
    <a href="#">Element</a>
    <ul>
      <li><a href="#">Sub-Element</a></li>
      <li><a href="#">Sub-Element</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Element</a>
    <ul>
      <li><a href="#">Sub-Element</a></li>
      <li><a href="#">Sub-Element</a></li>
    </ul>
  </li>
  ...
</ul>

Y el CSS base:

.nav {
  position: relative;
}
	.nav ul {
	  position: absolute;
	}
	.nav li {
	  list-style: none;
	}
	.nav a {
	  display: block;
	  width: 90px;
	}
	.nav > li {
	  float: left;
	}
		.nav > li > a + ul {
		  visibility: hidden;
		}
			.nav > li:hover > a + ul {
			  visibility: visible;
			}

JS Bin

La Solución

Ejemplo 2 Hover Intent moderno en menues dropdown | CSSLab.cl

Lo que se propone es atrasar el comportamiento del :hover a los sub-elementos, con unos pocos milisegundos (ms) de delay (en mis ejemplos, 0.3ms). Con esto haremos que el usuario cuando esté pasando sobre los elementos no los despliegue al instante sino que espere esos milisegundos antes de gatillarlos, denotando la verdadera intención del usuario: mostrar los sub-elementos o sólo pasar sobre el elemento. Este comportamiento se denomina hover intent y se puede realizar de 2 maneras: mediante la propiedad CSS3 transition-delay y con fallback con JS para los browsers que no soportan esta propiedad (IE9 e inferiores):

Utilzando CSS3:

/* 
  la declaración resumida es: 
  transition: propiedad duración tipo delay;
*/
.nav > li > a + ul {
  visibility: hidden;
  /* al salir el mouse del menu desplegado no debe haber delay
     por eso está en 0s */
  transition: visibility 0s linear 0s;
}
  .nav > li:hover > a + ul {
    visibility: visible;
    /* al entrar el mouse al elemento hay un delay de 300ms
       para desplegar el menu */
    transition: visibility 0s linear 0.3s;
  }

JS Bin

Utilzando JS/jQuery:

(function () { 
  var menuDropdown = $('.nav'),
      delay = 300; // retardo dropdown (ms)

  // esconde los submenues por defecto
  $('a + ul', menuDropdown).hide();

  $("li", menuDropdown).hover(function() { // mousein
    var elem = $(this);

  // indicador que el mouse ha entrado al elemento padre
  elem.attr('mIn', 'true');

  setTimeout(function () {
    // mostramos submenu
    if (elem.attr('mIn') == 'true') {
      $('a + ul', elem).show();
    }
    }, delay);
    
  }, function() { // mouseout

    // indicador que el mouse ha salido del submenu desplegado
    $(this).attr('mIn', 'false');
    // escondemos submenu
    $('a + ul', $(this)).hide();
    
  });
}());

JS Bin

Comentarios

  1. http://laneicfn620.lucialpiazzale.com [#]

    Wonderful beat ! I would like to apprentice whilst you
    amend your site, how can i subscribe for a weblog web site?
    The account helped me a acceptable deal. I have been a little bit familiar of this your broadcast provided vibrant transparent idea

  2. sergiommio139.iamarrows.com [#]

    I’m not sure where you are getting your information, but good topic.
    I needs to spend some time learning more or understanding
    more. Thanks for excellent info I was looking for this info for my mission.

  3. Esmeralda Hope [#]

    I blog often and I genuinely thank you for your information. This article has truly peaked my interest.
    I am going to take a note of your website and keep checking for new information about once per week.
    I subscribed to your Feed as well.

  4. Spotify plaque [#]

    An interesting discussion is definitely worth comment.
    I do think that you need to write more about this subject matter, it might not be a taboo subject but typically people don’t talk about such topics.
    To the next! All the best!!

  5. ivermectin for rosacea redness [#]

    Thanks in favor of sharing such a pleasant thinking, paragraph is nice,
    thats why i have read it fully http://herreramedical.org/ivermectin

  6. cytotmeds.com [#]

    Thank you.

    Youseful blog. Good post.

  7. Opxhvr [#]

    cialis in mexico price – tadalafil online price cialis 5 mg discount

  8. Wpmfxp [#]

    cialis 20mg australia – canadian pharmacy world coupon generic cialis buy uk

  9. Booker [#]

    Everything is very open with a precise explanation of the challenges.
    It was definitely informative. Your website is very useful.
    Thanks for sharing!

  10. pharmaceptica.com [#]

    tadalafil vs cialis reviews https://www.pharmaceptica.com/

  11. Cybersecurity Services [#]

    Wow, awesome blog format! How long have you ever been blogging for?
    you make running a blog look easy. The entire look of your
    web site is wonderful, let alone the content material!

  12. alternative recourbe cils [#]

    Incredible! This blog looks just like my old one!

    It’s on a completely different subject but it has pretty much the same page layout and design. Superb choice
    of colors!

  13. Gwzocw [#]

    prednisone 30 mg price – generic prednisone without prescription deltasone over the counter

  14. Zcrvbf [#]

    54899 prednisone – where to buy prednisone 5443 without prescription order prednisone 20mg online

  15. Earthwise heating and cooling energy efficient HVAC [#]

    What’s up friends, its great article concerning cultureand fully explained, keep it
    up all the time.

  16. collincayd693.bearsfanteamshop.com [#]

    What’s up to all, it’s genuinely a nice for me to go to see this site, it consists
    of useful Information.

  17. amoxicillin vs penicillin chemical structure [#]

    This article gives clear idea in support of the new users of blogging,
    that genuinely how to do blogging. http://antiibioticsland.com/Augmentin.htm

  18. custom vanity tops [#]

    Thank you for any other fantastic post. Where else could anybody get that
    kind of info in such a perfect means of writing?
    I’ve a presentation next week, and I am at the look for such information.

  19. https://advertisingcompany96396.daneblogger.com/4835895/the-specifics-about-auto-cooling-systems [#]

    My partner and I absolutely love your blog and find the majority of your post’s to be just what I’m looking
    for. can you offer guest writers to write content to suit your
    needs? I wouldn’t mind publishing a post or elaborating on a lot of the subjects
    you write concerning here. Again, awesome web log!

  20. lorenzodxmbq.theblogfairy.com [#]

    Hello, i think that i saw you visited my web site so i came to “return the favor”.I
    am trying to find things to improve my site!I suppose its
    ok to use a few of your ideas!!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab