Question

我使用Superfish导航栏实现导航，如下例所示： http://users.tpg.com.au/j_birch/plugins/superfish/examples/nav-bar/

我只需要第一级，就像这个jsfiddle：http://jsfiddle.net/v1c09us9/

现在，问题是如果子菜单中有10个项目，菜单项会开始向下移动。我希望菜单项保持在一行中并使用小箭头向右移动。我设法通过使其父级ul溢出x可滚动来使菜单项水平显示。

.sf-navbar li ul{
    white-space: nowrap;
    width: 100%;
    overflow-x: scroll;

}

.sf-navbar > li > ul > li {
    display: inline-block;

}

jsfiddle显示了这个实现。问题是，现在它有一个我想隐藏的滚动条，但无法找到方法。此外，它打破了我用来使菜单响应的黑客攻击，我在这个帖子中找到了，第三个回答How to make superfish dropdown menu responsive?

我想知道是否有任何方法可以隐藏滚动条并添加箭头来滚动项目，让它保持响应。或者有更好的替代超级鱼吗？我搜索了很多，但无法找到具有相同功能的好选择，其中菜单显示为一行而不是下拉列表。

由于

Answer 1

好的，所以我给了他一个很好的尝试。基本上我已经隐藏了滚动条，使其位于导航内部，并使用一些JQuery滚动导航中的项目并悬停，仍然是响应。您可能需要修改以完全按照您的要求获得它。

JSFiddle

<强> CSS

.sf-navbar > li > ul {
/* removed min width that was here */
overflow:hidden;
}

/*altered*/
.sf-navbar li ul{
    width: 100%;
    overflow-x: hidden;

}

.sf-navbar > li > ul > li {
    display: inline-block;
}

/*added*/

.sf-navbar li ul:hover { overflow-x:hidden }

<强> JS

$.fn.scrollList = function (delay) {
    delay = delay || 2000;
    var animateList = function ($list) {
        //get first child
        var $first = $list.children('li:first');
        var width = $first.outerWidth(true);
        //animate first two off the screen
        $first.animate({
            'margin-left': $list.width() * -1
        },
        // on animation complete
        function () {
            //reset and move to the end of the list
            $(this).css('margin-left', 0).add($(this).next()).appendTo($list);
            //start again after delay
            setTimeout(function () {
                animateList($list)
            }, delay);
        });
    };

    return this.each(function () {
        var $that = $(this)
        setTimeout(function () {
            animateList($that);
        }, delay);
    });

};

$('.sf-menu ul').scrollList();

响应式Superfish导航栏

1 个答案: