How do i use animate() to slide (left-wards or right-wards) the jQuery tabs navigation menu?

Question

I have a problem. I would like to use the animate() function to slide the navigation menu present jQuery tabs.

I am using a fixed width style for the tabs container and the no. of tabs is more than what could be accommodated - hence the extra tabs overflow onto the next line.

I would like to put two arrow buttons at both ends of the tab. So that when the user clicks on the button, the navigation menu slides in the respective direction.

I am using a theme that i made using jQuery UI's theme roller feature. The css for tabs uses relative positioning and animate() only works if absolute positioning is used. The css for jQuery tabs is :

    .ui-tabs { padding: .2em; zoom: 1; }
    .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .1em .1em 0;   overflow: hidden;     max-height: 25px; }
     .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .1em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .2em 0.7em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

So can anyone please suggest awork around to get this working properly?

Answer 1

What I would do is put your tabs in a container that has a greater width that it's container and then animate that container eg

<div id="topContainer" style="width: 800px; overflow: hidden;">
    <!-- calculate the width of #animateMe -->
    <div id="animateMe" style="width: 1250px; position: absolute;">
        ... <!-- your tabs here -->
    </div>
    ... <!-- tab content here -->
</div>

You may not be able to do it with the jQuery UI Tabs functionality.

Edit: After messing around a bit you should be able to get this working with the jQuery UI Tabs functionality.