Responsive Horizontal Scrolling Menu

Question

http://healthunit.com has a clean horizontal scrolling menu at the top of the screen once you view it from a mobile phone device. I'm trying to mimic that same exact functionality thanks to a site I'm redesigning with a huge level of navigation elements. Requirements: - Left and right scroll click options - Centered list item option centered in the space - Only one list item visible at a time - Horizontal Scrolling & Responsive - Clicking the last or first option in the list will take you to either the first option or last option in the list My current html for this section is: ``` ``` The CSS currently attached to it is: ``` nav#sub { background: #004173; background: linea…

Accepted Answer

So, finally I think I have what you are looking for:

Fiddle: http://jsfiddle.net/fzXMg/2/

CSS and HTML is in the Fiddle...

JS:

```
$(function(){
    var state = 0;
    var maxState = 6;
    var winWidth = $(window).width();
    $(window).resize(function(){
        winWidth = $(window).width();
        $('.box,.container_element').width(winWidth-100);
    }).trigger('resize');
    $('#lefty').click(function(){
        if (state==0) {
           state = maxState;
        } else {
           state--;
        }
        $('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
    });
    $('#righty').click(function(){
        if (state==maxState) {
           state = 0;
        } else {
           state++;
        }
        $('.container_element').animate({scrollLeft:((winWidth-100)*state)+'px'}, 800);
    });
});
```

This uses jQuery again.

Responsive Horizontal Scrolling Menu

Solution

Problem