how do I slide these buttons on horizontal navigation menu with jquery?

Question

I've this menu with ul li structure. It has hidden buttons in overflow: hidden; I want to be able to slide with next prev buttons through the hidden content. But since buttons are different size, I cannot think of a safe way to pull this off.

any help appreciated.

some pointers to jquery plugins also.

thanks.

html is here: http://jsfiddle.net/utKqe/2/

I managed to get desirable effect with this (but still cannot make it stop going to infinity):

    //other category page, navigate through cats
$(document).ready(function() {

    $('#otherleftarrow').click(function() {
        $('#othermenu ul').animate({marginLeft: '-=100px'}, 200);
        return false; // prevent default click action from happening!
    });

    $('#otherrighttarrow').click(function() {
        $('#othermenu ul').animate({marginLeft: '+=100px'}, 200);
        return false;
    });

});

Answer 1

Keep a list that contain the offsetX for each li element, and always remember the current offset you are at (initially 0). When you press "next", you slide the entire ul structure to -offsetXArray[nextElement], and similarily, when you press "prev", you slide it to -offsetXArray[prevElement]

Answer 2

jQuery let's you access the calculated (as in, actually displayed) width of elements, so you could use that to change the left offset of the navigation ul and so display the previously hidden buttons.

I'll get a link to the documentation asap.

Edit: it's width() : http://api.jquery.com/width/

Edit: Maybe this could give an idea of how you could use that:

$('#otherleftarrow').click(function() {
    var menu = $('#othermenu ul');
    menu.css(
        'marginLeft', 
        (menu.offset().left + $('.catotherselected').parent().prev().width()) + 'px'
    );
});

To prevent infinite scrolling: Add if s to test against menu.offset>=0 (right arrow). For the left arrow you will need to test against menu.offset < 0-(menu.width - [width of the bit that's visible, should be #othermenu - arrow widths])