title: How do i use animate() to slide (left-wards or right-wards) the jQuery tabs navigation menu?
body: <p>I have a problem. I would like to use the animate() function to slide the navigation menu present jQuery tabs.</p>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>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 :</p>
  
  <pre><code>    .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; }
  </code></pre>
  
  <p>So can anyone please suggest awork around to get this working properly?</p>