Dan Fergus Design > Student Resources > Syllabus > Class Schedule >Rollover Tabs

VCB328 Advanced Web Design

Exercise: Rollover Tabs with CSS

Tabbed navigation is very popular—it's clean and easy to use. Tabs can be created a number of ways, from simple HTML + CSS methods to more complex graphics-controlled-by-javacript techniques. In this exercise I present a method that falls somewhere in between: it uses graphics with rollover effects, but it controls them entirely with CSS. When they're finished they will look something like this:

Procedure

Part One: Create the Tabs

1. Get the file called SlidingTabTemplate.
2. Open slidingTabTemplate in Photoshop. If necessary, convert to RGB colors (Image > Mode > RGB).
3. Press the Edit in ImageReady button.
4. Once the file is open in ImageReady use the slice tool create five slices—one for each column:


Each slice should be exactly 150 pixels wide; you can check the width of the slices and adjust them accordingly in the Dimensions window.

5. In the Slice window, name the slices "tab1," "tab2," "tab3," etc.
6. Open the Optimize window . Select all of the slices with the Slice Select tool (click on the first, shift-click on the second, then the third, and so on). In the Optimize window choose PNG for the file format and 32 colors.
7. Choose Save Optimized As; in the save dialog box, choose Images Only. This will create a folder called "Images" with the 5 png files within.

Part Two: Create the HTML/CSS Page

1. Create a root folder for the project and call it Rollover Tabs or something similar. Place the folder in your documents folder.
2. Put the Images folder into the Rollover Tabs folder.
3. Launch Dreamweaver (or some other text editor). Open a new file and save it as rolloverTabs.html in the Rollover Tabs folder.
4. Write the following markup in the body:

<div id="mainNav">
<ul>
<li id="item1Tab"><a href="#" id="current"><span class="noShow">Item 1</span></a></li>
<li id="item2Tab"><a href="#"><span class="noShow">Item 2</span></a></li>
<li id="item3Tab"><a href="#"><span class="noShow">Item 3</span></a></li>
<li id="item4Tab"><a href="#"><span class="noShow">Item 4</span></a></li>
<li id="item5Tab"><a href="#"><span class="noShow">Item 5</span></a></li>
</ul>

</div>

 

5. Note the addition of id="current" to the first <a> tag; you can move it to any of the other <a> tags if you prefer (but only use one). This id will be used to indicate whichever page you are currently on; so if your 're creating the page for "Item 4," you would move the id="current" to the <a> tag for tab 4.
6. In the header (or in a separate CSS document) create the following styles:

<style type="txt/css">

 

#mainNav ul {
margin:0;
padding:0;
list-style-type:none;
}

#mainNav ul li{
display: inline;
float: left;
margin:0;
padding:0;
}

 

</style>

 

The first style rule hides the bullets in the list and removes the indent. The next style rule turns the vertical list column into a horizontal row.

7. Know we need to write the style rules for the individual tabs. Each tab will have three style rules, one for the "normal" state of the tab, one for the "over" or "hover" state, and one for the "current" state. These of course correspond to the three vertical sections on each of the tab pngs we made earlier in Part One. Write the following styles:

#item1Tab a:link, #item1Tab a:visited {
background-image: url(images/tab1.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display:block;
margin:0;
padding:0;
width:150px;
height:50px;
}

 

#item1Tab a:hover {
background-image: url(images/tab1.png);
background-repeat: no-repeat;
background-position: 0px -50px;
display:block;
margin:0;
padding:0;
width:150px;
height:50px;
}

 

#item1Tab #current {
background-image: url(images/tab1.png);
background-repeat: no-repeat;
background-position: 0px -100px;
display:block;
margin:0;
padding:0;
width:150px;
height:50px;
}

 

All three styles are nearly identical. Each creates a 150px by 50px box around Item1 and then adds the tab1 graphic as a background. However, note the changes to the background-position line: the first or "normal" state shows only the top third of the graphic (the graphic is 150 pixels tall, put it's showing only 50 pixels of it); the second "hover" state shows the middle third; and the final style shows the bottom third of the graphic. Thus when one rolls-over the tab it changes, essentially 'sliding' up and down into the proper position.

8. Copy and paste these three rules. Change the first lines on each of the styles to item2Tab, and change the second line to tab2.png.
9. Copy and paste all three style rules three more times, changing the numbers to 3s on the next set, then 4s on the penultimate set, and finally 5s on the last set.
10. But we're not quite finished yet—there's still the matter of the text in the list covering the tabs. We can remove this with one more style:

.noShow {
display: none;
}

 

11. Try it. Do they work?

Due: Beginning of class, week 4 .

Class schedule

Syllabus

Student resource index