Using jQuery to add scrolling to a flat UL list

Question

I have this UL list:

<ul class="third-level-nav">
  <li><a href="/accommodations/Home.aspx">Home</a></li>
  <li><a href="/accommodations/Household-Ordering-Tutorial.aspx">
       Household Ordering Tutorial
      </a>
  </li>
  <li><a href="/accommodations/List-of-standard-items.aspx">
       List of standard items
      </a>
  </li>
  <li>
     <a href="/accommodations/Costs-of-utilities.aspx">
      Costs of utilities
     </a>
  </li>
</ul>

It displays like this on the page, as a flat list (LI floated left, list-style:none):

Home | Household Ordering Tutorial | List of standard items | Costs of utilities

The problem is, there could be a dozen or more of these LI items, and they'll wrap to the next line. Is there a way to use jQuery to make the list scrollable? In other words, it would show a > if there are more items, and a < when the user has scrolled some items out of view? It would smoothly scroll left and right.

Thanks.

Answer 1

You can do this without jQuery or JavaScript. Try this CSS instead of using float:

LI {
    display:inline-block; 
    list-style:none;
}
UL {
    white-space: nowrap;
}

http://jsfiddle.net/mblase75/HhecV/

This won't make the list scrollable, but it will make the entire page scrollable. To make just the list scroll horizontally, add overflow:auto:

LI {
    display:inline-block;
    list-style:none;
}
UL {
    white-space: nowrap;
    overflow: auto;
}

http://jsfiddle.net/mblase75/HhecV/2/