javascript - 响应式Superfish导航栏

我已经用Superfish navbar实现了导航，如下例所示：
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正在显示此实现。问题在于，现在它有一个滚动条，我想隐藏它，但找不到解决方法。另外，它打破了我用来使菜单响应的hack，我在此线程中找到了第三个答案How to make superfish dropdown menu responsive?

我想知道是否有什么方法可以隐藏滚动条并添加箭头来滚动项目，以使其保持响应状态。还是有更好的替代超级鱼？我进行了很多搜索，但是找不到具有相同功能的好选择，即菜单显示为一行而不是下拉菜单。

谢谢

最佳答案

好的，所以我已经尝试了一次。基本上，我隐藏了滚动条，使其位于导航内部，并使用了一些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();

关于javascript - 响应式Superfish导航栏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26886976/