문제

나는 문제가있다 jQuery lavalamp 플러그인. 단일 레벨 메뉴와 완벽하게 작동하지만 드롭 다운을 추가 한 후 약간 손실됩니다. 내가 의미하는 바는 다음과 같습니다. http://screenr.com/0fs.

물론 내가 달성하고자하는 것은 사용자가 하위 항목을 가리킬 때 Lavalamp 배경이 포트폴리오 항목에 머무르는 것입니다.

플러그인을 약간 변경하는 것이 문제라고 생각합니다. 따라서 플러그인의 전체 코드는 다음과 같습니다. 필요한 것은 현재 단계에서 lavalamp를 멈추게하는 간단한 방법입니다. <li>아이들의 아이들은 맴돌고 나서 정상적으로 일하는 것으로 돌아갑니다. 참조 용 전체 플러그인 코드는 다음과 같습니다.

(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);`

미리 감사드립니다.

도움이 되었습니까?

해결책

이에 대한 수정은 다음 페이지에서 표시되는대로 Lavalamp의 Hover ()를 마우스 오버로 변경하는 것입니다.

http://hekimian-williams.com/?p=146

다른 팁

최상위 LI에 추가 클래스를 추가하고 JS를 업데이트했습니다.

$li = $("li.top-level-item", this),
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top