Conseguir plugin de jQuery Lavalamp para trabajar con el menú desplegable?
-
18-09-2019 - |
Pregunta
Tengo un problema con el jQuery plugin de Lavalamp . Funciona perfectamente con un menú de un solo nivel, pero después de añadir un menú desplegable que se pone un poco perdido. Esto es lo que quiero decir:. http://screenr.com/0fS
Por supuesto que me gustaría lograr es para el fondo lavalamp para alojarse en el Artículo de parque cuando el usuario se desplaza sobre los subelementos.
Creo que es una cuestión de cambiar ligeramente el plugin, así que aquí está el código completo del plugin. Lo que se necesita es una manera simple de hacer la parada lavalamp en la etapa actual cuando los hijos de <li>
se cernían y luego volver a trabajar normalmente después. Aquí está el código del plugin completo para referencia!
(function($) {
$.fn.lavaLamp = function(o) {
o = $.extend({ fx: "linear", speed: 500, click: function(){} }, o || {});
return this.each(function() {
var me = $(this), noop = function(){},
$back = $('<li class="back"><div class="left"></div></li>').appendTo(me),
$li = $("li", this), curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function() {
move(this);
}, noop);
$(this).hover(noop, function() {
move(curr);
});
$li.click(function(e) {
setCurr(this);
return o.click.apply(this, [e, this]);
});
setCurr(curr);
function setCurr(el) {
$back.css({ "left": el.offsetLeft+"px", "width": el.offsetWidth+"px" });
curr = el;
};
function move(el) {
$back.each(function() {
$(this).dequeue(); }
).animate({
width: el.offsetWidth,
left: el.offsetLeft
}, o.speed, o.fx);
};
});
};
})(jQuery);`
Gracias de antemano.
Solución
La solución a esto es cambiar el vuelo estacionario () en el lavalamp al pasar el ratón como se muestra en la página siguiente ..
Otros consejos
He añadido clase adicional a la parte superior li nivel y actualizó la JS:
$li = $("li.top-level-item", this),