Responsive Superfish navbar

Question

I have nav implemented with Superfish navbar, as in this example: http://users.tpg.com.au/j_birch/plugins/superfish/examples/nav-bar/

I have only needed the first level, as in this jsfiddle: http://jsfiddle.net/v1c09us9/

Now, the problem is that if there are like 10 items in the sub menu, the menu items start moving down. I want the menu items to stay in one line and use a small arrow to move right. I managed to make the menu items appear horizontally by making their parent ul overflow x scrollable.

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

}

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

}

The jsfiddle is showing this implementation. The problem is that now it has a scrollbar which I want to hide, but can't find a way to do it. Also, it breaks the hack I am using to make the menu responsive which I found in this thread, third answer How to make superfish dropdown menu responsive?

I'd like to know if there is any way I can hide the scrollbar and add an arrow to scroll the items, keeping it responsive. Or is there a better alternative to superfish? I searched a lot but couldn't find a good alternative which has the same feature, where the menu is shown as a line instead of a dropdown.

Thanks

Answer 1

Okay, so I have given this a good old try. Basically I have hidden the scroll bar, made it sit inside of the navigation and used some JQuery to scroll the items in the navigation with hovering and still be responsive. You may need to tinker to get it exactly to how you want.

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