响应式 Superfish 导航栏

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