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 functi

Answer 1

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.