CSS：制作水平滚动菜单

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

<script type="text/javascript">
    $(function () {
        var div = $('div.sc_menu'),
             ul = $('ul.sc_menu'),
             ulPadding = 15;
        var divWidth = div.width();
        div.css({ overflow: 'hidden' });
        var lastLi = ul.find('li:last-child');
        div.mousemove(function (e) {
            var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

            var left = (e.pageX - div.offset().left) * (ulWidth - divWidth) / divWidth;
            div.scrollLeft(left);
        });
    });
</script>

JSFiddle

Check here

Update3

Update 4

This is dynamic menu retreived from db build with ul & li's. If there is more Li than screen width, I simply want an arrow to left & right side to scroll extra li's, if any.

Answer 1

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'
    });
    }
});    
});

Answer 2

Good article about horizontal scrollable menu here

And DEMO (Note: Reduce the size of the browser)

Answer 3

hop this should be help you see link

http://jquery.malsup.com/cycle/int2.html

see Non-Image Content at the last of page

see this fiddle: http://fiddle.jshell.net/vac9x/1/