Hover Intent moderno en menues dropdown

7/May/2015 482

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. May [#]

    I’ll right away seize your rss as I can’t in finding your email subscription hyperlink or newsletter service.
    Do you’ve any? Please permit me understand in order
    that I may subscribe. Thanks.

  2. spencermcex083.trexgame.net [#]

    I am really loving the theme/design of your weblog. Do you
    ever run into any browser compatibility problems? A couple of my blog visitors have complained
    about my website not operating correctly in Explorer but looks great in Opera.
    Do you have any tips to help fix this issue?

  3. ivermectin [#]

    stromectol cost http://stromectolforte.com/# is ivermectin a prescription drug invermechtin prescription drug

  4. pharmaceptica.com [#]

    can erectile dysfunction be hereditary https://www.pharmaceptica.com/

  5. cvs zyrtec price [#]

    best price for cetirizine – http://allergyd.com

  6. walmart cetirizine hcl [#]

    cetirizine – http://allergyd.com

  7. https://judahhwjsd.theblogfairy.com/7188894/the-many-benefits-of-a-smartwatch [#]

    I know this if off topic but I’m looking into starting my
    own weblog and was wondering what all is needed to get set up?
    I’m assuming having a blog like yours would cost a pretty
    penny? I’m not very internet smart so I’m not 100% certain. Any suggestions or advice
    would be greatly appreciated. Cheers

  8. Kaley [#]

    I used to be suggested this website by means of my cousin. I’m no longer certain whether
    or not this submit is written via him as no one else recognize such specific approximately
    my problem. You are wonderful! Thank you!

  9. FIVEM STORE [#]

    With havin so much content and articles do you ever run into any issues of plagorism or copyright infringement?
    My blog has a lot of unique content I’ve either authored myself or outsourced but it seems a lot of it is popping it up
    all over the web without my authorization. Do you know any techniques to help stop content from being ripped off?
    I’d certainly appreciate it.

  10. skimboarding [#]

    Hi Dear, are you actually visiting this website regularly,
    if so then you will without doubt take pleasant experience.

  11. writeablog.net [#]

    I was suggested this blog by means of my cousin. I am
    now not positive whether this post is written by him as no one
    else recognize such exact approximately my difficulty.
    You’re incredible! Thank you!

  12. modafinilreviews [#]

    provigil modalert online

  13. provigilreviews [#]

    how to get modafinil prescription provigil vs modafinil

  14. bactrim ds [#]

    bactrim dosing trimoxazole syrup

  15. expired stromectol reddit [#]

    stromectol 6

    several blocking agent letter

  16. Kenneth [#]

    You could certainly see your skills in the article you
    write. The world hopes for more passionate writers such as you
    who are not afraid to say how they believe.
    Always follow your heart.

  17. Anthonyliz [#]

    zytenz in stores walmart best natural testosterone for men we own the knight where can i order generic viagra why take flomax at bedtime supplement to increase women’s libido can viagra work for women

  18. https://blogfreely.net [#]

    I’ve been browsing online greater than 3 hours as of late, yet I never discovered any interesting article like yours.
    It’s lovely price sufficient for me. In my opinion, if all website owners and bloggers made excellent content
    as you probably did, the web can be a lot more helpful than ever before.

  19. sergiobruz.bloggersdelight.dk [#]

    Way cool! Some very valid points! I appreciate you penning this
    post plus the rest of the site is extremely good.

  20. signal decoding [#]

    I have been exploring for a little bit for any high quality articles or weblog posts on this
    sort of area . Exploring in Yahoo I eventually stumbled upon this
    web site. Reading this information So i’m glad to show that
    I have a very excellent uncanny feeling I found out exactly what I needed.
    I most unquestionably will make certain to don?t omit this
    site and give it a look on a constant basis.

  21. RodolfoSwece [#]

    what is sildenafil citrate 100mg walmart pharmacy prices for viagra viagra 200mg tablet cialis without a doctor 20mg herbal seeds for planting

  22. ivermectin [#]

    is stromectol over the counter http://stromectolforte.com/# ivermectin price where to buy ivermectin

  23. yeezy 350 v2 [#]

    I wanted to post a brief remark to appreciate you for the superb tips you are placing at this website. My considerable internet look up has now been compensated with sensible facts to write about with my classmates and friends. I ‘d declare that most of us readers actually are really fortunate to dwell in a decent network with many brilliant professionals with beneficial opinions. I feel somewhat lucky to have used the web site and look forward to really more fun minutes reading here. Thanks a lot again for a lot of things.

  24. yeezy shoes [#]

    I’m writing to let you understand what a nice discovery our child gained viewing your web site. She picked up a lot of details, with the inclusion of how it is like to possess a great coaching spirit to get certain people without hassle gain knowledge of certain extremely tough subject matter. You actually surpassed our own desires. Thanks for imparting these warm and friendly, trusted, explanatory and also easy thoughts on that topic to Ethel.

  25. hermes belt [#]

    I wanted to send you the tiny word to be able to say thanks as before about the wonderful solutions you’ve featured on this website. It is simply surprisingly generous with people like you to supply without restraint exactly what many of us might have sold for an e-book to earn some cash for their own end, chiefly seeing that you could have tried it if you desired. Those good ideas as well served like the easy way to be certain that other people have a similar dreams like my own to realize great deal more related to this matter. I believe there are millions of more pleasurable periods up front for individuals that look over your blog post.

  26. krim generik ivermectin 1 [#]

    dosage ivermectin for humans http://stromectolforte.com/ ivermectin 3 mg tablet dosage ivermectin

  27. prednisonetaper [#]

    how does prednisone work prednisolone acetate

  28. FritzPeerb [#]

    goodrx prescription drug prices pfizer samples for physicians viagra class action lawsuit viagra cialis walmart online price match best price viagra cialis history of viagra development

  29. Monroe [#]

    My brother suggested I might like this website. He used
    to be entirely right. This put up actually made my day. You cann’t imagine simply how much time I had spent for this information! Thanks!

  30. Shopping online [#]

    Stunning story there. What happened after? Good luck!

  31. modalertonline [#]

    provigil vs modafinil provigil drug

  32. London wedding photographer [#]

    Hi there, I enjoy reading all of your article post. I wanted to write a little comment to
    support you.

CSSLab