• Lesson Index:
• Introduction
• Table Tab Menu
• Overview
• Table Structure
• Cross Browser Issues
• Hover Effect
• Replacing Tab Image
• Remove Bottom Border
• Duplicating the Pages
• Javascript Rollover
• RollOver Images
• Examine the Code
• JS with CSS-class
• Use Single Image
• CSS Rollover Buttons
• CSS Hover Rollovers
• Use Single Image

Table Tab Menu: Duplicating the Pages

In the previous lesson, we built a template code of the tab menu under the file tabletabs.html. Now we are going to duplicate that page into three pages: index.html, services.html, and contact.html. They correspond to the three tabs "Welcome", "Services", and "Contact" respectively. Before we start duplicating tabletabs.html, we are going to make the Welcome page be the default index.html page. So first change tabletabs.html as shown...

Now duplicate tabletabs.html to index.html, services.html, and contact.html.

For the index.html page, add content to indicate that it is the Welcome page...

And note that its tab is already selected...

For the services.html page, add services content ...

And make its table cell be selected. Remeber to remove the selection from the other table cells...

Do the same for the contact.html...

And you are all set.

Here is the live working version of the code.

Next Lesson: