Autor Tema: Añadir Delay en hover, menu multinivel Jquery y CSS  (Leído 4383 veces)

resback

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Añadir Delay en hover, menu multinivel Jquery y CSS
« en: 25 de Julio 2014, 00:27 »


Tengo este menú multinivel montado en una página web:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

Tiene un efecto hover que al poner el mouse y al quitarlo añade una animación de desenvolverse, este menu tiene opciones de controlar el tiempo de la animación.

Lo que me interesa saber  es como controlar el tiempo en el que quitas el puntero del menu y se activa el efecto de desenrrollarse. Ya que basta unos milisegundos que tengas el puntero fuera del área del menú y se oculte todo totalmente.

Este menú tiene exactamente el efecto deseado, pero quiero hacerlo en el menu que mencione primero (DynamicDrive)

http://users.tpg.com.au/j_birch/plugins/superfish/example.html

** Duda opcional **

En el primer menú se aplica el ID y CLASS a una capa <DIV>, y dentro de ella esta la etiqueta <Ul> que no tiene ningún ID y CLASS, si quiero poner ese ID y CLASS a la etiqueta "<UL>" deja de funcionar el menú.

El segundo menú tiene un ID y CLASS en la etiqueta <UL> directamente sin DIVS, si pongo ese código en una etiqueta superior,"<DIV>" el menú no funciona más.

------

Me gustaría saber  como hacer que el segundo menú (superfish) se apliquen los ID y CLASS a una etiqueta "<DIV>" Y DENTRO DE ELLA <UL>

Ejemplo:

<div class="sf-menu" id="example">

<ul>

 <li></li>
 <li></li>

</ul>

</div>


Saludos y gracias por sus comentarios

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Añadir Delay en hover, menu multinivel Jquery y CSS
« Respuesta #1 en: 26 de Julio 2014, 00:10 »
Hola, en el segundo menú parece que el efecto de retrasar la desaparición del menú se logra con este código:

        // A private function for delaying the mouseOut function
        var delay = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            ob.hoverIntent_s = 0;
            return cfg.out.apply(ob,[ev]);
        };

Que tal como indica "introduce un retardo en el evento mouseOut. La idea sería tratar de aplicar esta función al otro menú, pero si te fijas en el código del primer menú, está cargando jQuery desde internet con:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Tendrías que tener jQuery en tu servidor para modificar el código y crear el efecto deseado (habría que ver con calma cómo conseguirlo).

Sobre:

** Duda opcional **

En el primer menú se aplica el ID y CLASS a una capa <DIV>, y dentro de ella esta la etiqueta <Ul> que no tiene ningún ID y CLASS, si quiero poner ese ID y CLASS a la etiqueta "<UL>" deja de funcionar el menú.

Respuesta: es posible, depende de cómo esté programado el código. Si el código está programado para buscar un elemento UL dentro del elemento raíz (el dív) y tu cambias haciendo que el elemento raíz sea un UL, intentará buscar un UL dentro del raíz y no lo encontrará, por lo que no funcionará. Pero esto depende de cómo esté programado el código, puede que funcione de forma distinta a esta que te he comentado. Para comprobarlo tendrías que probarlo.

El segundo menú tiene un ID y CLASS en la etiqueta <UL> directamente sin DIVS, si pongo ese código en una etiqueta superior,"<DIV>" el menú no funciona más.

Respuesta: pasa exactamente lo mismo: depende de cómo esté programado el código.

Lo que dices de modificar el menú superfish, habría que estudiarlo con calma.

Saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".