CSS: Making Horizontal scrollable Menu

Question

I want to add a menu to my application screens. The menu will have the menu icons which are horizontal scroll-able one menu at a time when left or right arrow pressed. Based on the menu screen the menu should be scrolled to that menu icon for that menu screen. Ex.: ``` < menu1 | menu2 | menu3 > ``` Say there are 6 menu icons and 3 are visible at a time. on press of right arrow, it should scroll one item at a time. and if my screen is related to menu 4, the menu4 has to be positioned. ``` < menu4 | menu5 | menu6 > ``` And also each menu item should be clickable. Please let me know, How I can achieve this. Update Have js for MouseOver ```

Accepted Answer

See this fiddle:

http://jsfiddle.net/kzQFQ/49/

```
$(document).ready(function () {
$('.right').click(function () {
    var position = $('.container').position();
    var r=position.left-$(window).width()
    $('.container').animate({
        'left': ''+r+'px'
    });
});

$('.left').click(function () {
    var position = $('.container').position();
    var l=position.left+$(window).width()
    if(l<=0)
    {
    $('.container').animate({
        'left': ''+l+'px'
    });
    }
});    
});
```

CSS: Making Horizontal scrollable Menu

Solution

Problem