0

我一直在尝试使用 CSS & jquery 制作一个水平滑出菜单。

问题： 1) CSS - 当悬停在选项上时（在这种情况下为“服务”），菜单的其余部分被按下。我不知道如何克服这一点。

2）我能做些什么来使菜单在活动选项上保持打开状态吗？即，如果用户单击“服务 1”，菜单将保持打开状态（完全滑出）。

我在 Stackoverflow 上看到了这个，它似乎和我描述的问题一样：http: //dabblet.com/gist/3635623/f69409ee9ee7e6613b7ed098a6a82b6a5445ed07

最后，我的jsfiddle：http: //jsfiddle.net/LJ4tH/13/

HTML：

    <nav>
    <ul id="menu-nav">
    <li><a href="#">About Us</a></li>
    <li class="has-flyout"><a href="#">Services</a>
    <ul class="flyout">
    <li class="active"><a href="#">Service 1</a></li>
    <li><a href="#">Service 2</a></li>
    <li><a href="#">Service 3</a></li>
    </ul>
    </li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">Blog</a></li>
    </ul>
    </nav>

查询：

(function navslider($) {
    $('.flyout').hide();
    $('.has-flyout').on({
        mouseenter: function() {
            $(this).find('ul.flyout').stop().animate({width: 'toggle'},1000);
        },
        mouseleave: function(){
            $(this).find('ul.flyout').stop().animate({width: 'toggle'},3000);
        }
     });
})(jQuery);

CSS：

    nav li { display: inline-block; }
    /*li a:hover { margin-top:0px; }/*This doesn't seem to work*/
    .flyout { display: inline-block; white-space: nowrap; margin-top: 0px; }
    /*ul.flyout li.active { margin-top: 0px; }
    ul.flyout. li. a:hover { margin-top: 0px; }*/

谢谢

晶圆厂

4

1 回答 1

0

你可以尝试这样的事情：

(function navslider($) {
    $('.flyout').hide();
    $('.has-flyout').on({
        mouseenter: function () {
            if ($(this).hasClass("active")) return;

            $(this).find('ul.flyout').stop().animate({width: 'toggle'}, 500);
        },
        mouseleave: function () {
            if ($(this).hasClass("active")) return;

            $(this).find('ul.flyout').stop().delay(500).animate({width: 'toggle'}, 500);
        },
        click: function () {
            $(this).toggleClass('active');
        }
    });
})(jQuery);

http://jsfiddle.net/LJ4tH/20/

没有看到项目被推下的问题，除非像 Dim3i 所说的那样，当文档不够宽时。

于 2013-02-05T20:25:34.243 回答