css - para - Demora por 1 segundo la desaparición de un menú desplegable cuando el mouse se aleja, a menos que se devuelva

menu desplegable vertical html5

Question

Aquí está mi barra de navegación HTML

<nav>
    <ul id="mainnav">
        <li><a href="#">a thing</a></li>
        <li><a href="#">some stuff</a>
            <ul>
                <li><a href="###">dropdown1</a></li>
                <li><a href="###">dropdown2</a></li>
            </ul>
        </li>           
    </ul>
</nav>

y el Javascript

<script type="text/javascript">

$(''#mainnav ul'').hide();

$(''#mainnav li > a'').hover(
      function () {
      //show its submenu
        $(''ul'', this.parentNode).stop().slideDown(0) = set 
      }
    );

$(''#mainnav li'').hover(null, 
      function () {
      //hide its submenu
        $(''ul'', this.parentNode).stop().delay(1000).slideUp(0); 
    });

Obtuve el JavaScript de jsfiddle y lo hice funcionar. Soy bastante competente en HTML y CSS, pero aparte de la lógica bastante obvia, diría que JavaScript me es ajeno.

Con CSS, todo se ve así:

Estoy buscando un fragmento de CSS que, cuando quite el mouse (hover (nulo)) del menú desplegable, no desaparezca de inmediato , sino que se retrase hasta después de un segundo, pero no desaparecerá si puse mi mouse vuelve al menú antes de que lo haga .

He tenido un buen aspecto, pero no he podido encontrar ninguna respuesta en el sitio que no solo aborde este problema preciso directamente, sino que también sea lo suficientemente simple para que lo entienda.

Answer 1

Editar: Creo que la solución de CSS pura anterior es mejor.

Pruebe esto: http://jsfiddle.net/dqisv/g1f0nth5/3/

Establezca la pantalla del submenú predeterminado en none, luego use jCuery''s addClass para configurar la visualización de ese elemento para bloquear. Agregue un retraso, luego cree un elemento de cola para eliminar esa clase.

$(document).ready(function () {    
    $(''#mainnav li'').hover(
        function () {
             $(''ul'', this).addClass(''subnav-show'').delay(2000).queue(function(){
                $(this).removeClass(''subnav-show'').dequeue();
            });               
        });
});

Alternativamente, puede intentar usar esto: http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

DEMO Debo decir que javascript no es una buena solución para ese caso ... css es una forma mucho mejor de lograrlo ... de todos modos

$(document).ready(function(){
    $(''#mainnav li ul'').hide()
    $(''#mainnav li'').on(''mouseenter'', function(){
        $(this).css(''background'',''yellow'');
        $(this).find(''ul'').slideDown(700);
    });
    $(''#mainnav li'').on(''mouseleave'', function(){
        $(this).css(''background'',''none'');
        $(this).find(''ul'').slideUp(700);
    });
});

en css DEMO

#mainnav li{
    background: #eee; 
}
#mainnav li ul li{
    background: none; 
}
#mainnav li:hover{
   background: yellow;
}
#mainnav li:hover ul{
    height: 100px;
    transition-delay: 0s;
     transition-duration: 1s;
}
#mainnav li ul{
    overflow: hidden;
    height: 0px;
    transition-delay: 10s;
    transition-duration: 2s;
}

retardo de transición: 10s; el submenú desaparece después de 10s, así que espéralo