Usamos Twitter Bootstrap e eu queria que nossos menus suspensos da barra de navegação abrissem automaticamente ao passar o mouse (passar o mouse), então este é um minúsculo JQuery JavaScript que faz isso.

Uso

Basta colocar no final da página, antes da </body>tag. O script reduzido:

<script type="text/javascript">
(function(e,d,b){var a=0;var f=null;var c={x:0,y:0};e("[data-toggle]").closest("li").on("mouseenter",function(g){if(f){f.removeClass("open")}d.clearTimeout(a);f=e(this);a=d.setTimeout(function(){f.addClass("open")},b)}).on("mousemove",function(g){if(Math.abs(c.x-g.ScreenX)>4||Math.abs(c.y-g.ScreenY)>4){c.x=g.ScreenX;c.y=g.ScreenY;return}if(f.hasClass("open")){return}d.clearTimeout(a);a=d.setTimeout(function(){f.addClass("open")},b)}).on("mouseleave",function(g){d.clearTimeout(a);f=e(this);a=d.setTimeout(function(){f.removeClass("open")},b)})})(jQuery,window,200);
</script>

Fonte e demonstração

Consulte este jsfiddle para obter a fonte legível completa e a demonstração.

Características

• código minúsculo (~ 0,5k)
• fácil de integrar – basta adicioná-lo à sua página, pronto. Nenhuma configuração ou inicialização necessária.
• Os menus caem após um pequeno atraso de 200 ms (ajustável) para evitar cintilação

Ressalvas

• Funciona no Chrome, Safari e Firefox, não testado no IE
• Não funciona corretamente no iPad Mobile Safari (deve desligá-lo porque não há estado de foco em dispositivos de toque)

Como funciona

Muito simples. Ativado mouseenter, o script define um cronômetro que adiciona a openclasse ao menu suspenso após 200ms. On mouseleave, o cronômetro que configuramos mouseenteré removido para que não seja acionado de fato e removemos a openclasse novamente.

JavaScript vs. CSS apenas

Existem apenas versões CSS que alcançam um efeito semelhante , mas, infelizmente, elas caem muito rapidamente. Eu queria que os menus permanecessem fechados quando você estivesse apenas navegando na barra superior e só caíssem quando você realmente parasse em um menu por um (muito curto) tempo. Eu tentei conseguir esse efeito com Transições CSS3, mas como isso deixaria de fora alguns navegadores mais antigos, acabei com esse pequeno JavaScript.