HOWTO: jQuery UI Tabs Styling
Have you wanted to do something a little different with your jQuery UI Tabs?
- Remove the header background
- Remove the entire header
- Remove most of the formatting
- Make the non-active tabs smaller
- Add icons
- Centre the tabs
- Move the tabs to the bottom
- To the left
- To the right
- Nested horizontally and then vertically
- Have a single line of tabs that scrolls
All of these examples only involve CSS changes (except for the single line of tabs) that can be added inline to your page to override the defaults. Note, however, that for the left and right side examples you need to explicitly set the tab content height and the tabs list width, and that for the single line of tabs you must specify the overall list width.