Tengo este menú multinivel montado en una página web. Tiene un efecto hover que al poner el ratón y al quitarlo añade una animación de desenvolverse. Este menú tiene opciones de controlar el tiempo de la animación.
Lo que me interesa saber es cómo 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 otro menú tiene exactamente el efecto deseado, pero quiero hacerlo en el menu que mencioné primero.
Duda opcional
En el primer menú se aplica el id y class a una capa <div>, y dentro de ella esté la etiqueta <ul> que no tiene ningúnid y class. Si quiero poner eseid 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 <div>. Si pongo ese código en una etiqueta superior, <div> el menú no funciona más.
Me gustaría saber cómo hacer que el segundo menú 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
Respuestas
El problema del primer menú es que no está preparado para hacer lo que quieres, así que no es sencillo añadir ese delay para ocultar el menú al mover el puntero del ratón fuera del menú.
Por suerte el segundo menú que indicas sí que lo tiene y es realmente sencillo de utilizar. Sobre tu pregunta de cómo aplicar el segundo menú desplegable a tu código HTML, suponiendo que el código sea el siguiente:
<div class="sf-menu" id="example"> <ul> <li> ... </li> <li> ... </li> </ul> </div>
La forma de activar el menú sería:
<script> jQuery(document).ready(function() { jQuery('#example ul').superfish(); }); </script>
Por supuesto no te olvides de enlazar en tu página los estilos CSS y los archivos JavaScript del menú:
<link href="superfish.css" rel="stylesheet" media="screen"> <script src="jQuery.js"></script> <script src="superfish.js"></script>
@javiereguiluz