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

VCA222 Web Design

Exercise: CSS Rollover Tabs

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 another 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

Tabbed navigation requires at least two, but usually three "states" per button: normal (how the tab usually appears), an "over" state (how the tab appears when it's rolled-over), and a "current" state (how the tab appears when you are on that particular page). Some methods require you to create a separate graphic for each state of each button, but with this method each graphic contains all three states (normal, over, and current).

  1. I have provided for you a zipped file to download. Open the zip file on your computer, and place the graphics in another folder called "images." Put this "images" folder inside a folder for this exercise called yourName_tabsExercise.
  2. Before we proceed to the code, look at these graphics; note how they are constructed—three tabs in one, all stacked on on top of the other. This will allow us to "slide" them up and down.

Part Two: Create the HTML/CSS Page

  1. Launch Dreamweaver (or some other text editor). Open a new file and save it as rolloverTabs.html in the yourName_tabsExercise1 folder.
  2. Write the following markup in the body:

    3. <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>

     

    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 per tab menu). 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.

  3. Create a cascading style sheet section in your <head> Remember, all of your styles must be placed between these two tags.:

    4. <style type="text/css">

     

    </style>

     

  4. Within the <style> tags write the following style rules:

    5. #mainNav ul {
    margin:0;
    padding:0;
    }

     

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

     

    .noShow {
    margin-left: -999em;
    }

     

    The first style rule removes the indent. The next style rule turns the vertical list column into a horizontal row. The third rule hides the list text to make room for the graphics.

  5. 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. Write the following style rules:

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

     

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

     

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

     

    All three styles are nearly identical. Each creates a 75px by 25px 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 75 pixels tall, put it's showing only 25 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.

  6. 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.
  7. 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.
  8. Try it. Do they work?

 

Class schedule

Syllabus

Student resource index