jQuery Tutorial: Using Themeroller to Instantly Build a Tab Navigation

I am in love with jQuery and the people who have developed the library and so generously shared, like the folks at jquery.com who have developed ThemeRoller. Your life is about to get so much easier as a web developer because you don't have to reinvent the wheel!

Look at the slick tab navigation I created in literally 5 minutes (image is not actual size):

So just how easy is it?
1) Go to ThemeRoller.

2) Click on the "Gallery" tab on the top of the black navigation to the left. Notice all the widgets on the main page. Which would you like on your site?

3) Select a theme from the gallery. Notice how the colors of all the widgets change. For this exercise, I selected "Sunny".

4) If you're feeling particular or don't see the color palette you need, click the "edit" button at the bottom of the theme icon and use hexadecimal color codes to change your colors.
...OR simply click "Download" to download the theme as is. If you have done some editing, click the orange "Download Theme" button.

5) This will take you to a page that says "Build Your Download". Select the elements you will need for your project. I think keeping it simpler is better--you don't want a bunch of code you don't need. For example, I did not select "Position", since the tabs nav is the only element I am using.

6) You will receive a zipped file with everything you need, except your content of course.

7) Expand it and open the folder. Inside you will see folders that contain an index.html file, a .js file, and a .css file.

8) Edit the index.html file to remove all of the extraneous text--like the greeting and explanation, so that all that remains is the necessary html for the file and the formatted tabs navigation. you may want to leave the other two alone because they're pretty complex--unless you want to tinker with them to see what they do, or your skills are more advanced. You can always use a different .css file and .js file for the rest of the site.

You may also want to move the call to the .js file to the bottom so the page loads more quickly.

9) Replace the default content with your own, and add tabs and sections as you need them.

So there you go! Polished tab navigation, in just minutes!

If you feel that I have forgotten anything feel free to post any questions you may have below.