thumbnail

Dan Fergus Design > Student Resources > General Reference > Graphical Tabs

Web Reference

Graphical Tabs (Improved!)

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:

 

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. To begin, I created the tabs as a single graphic image. Note that I include each button state for every tab; the top row is "normal," the second row is "over" and the bottom "current." I also made sure that each row was exatly 1/3 the height of the image:

    2. sample graphic

     

  2. Next I used the Slice tool in Photoshop to divide the graphic into five separate .png files. Here is one of them:

    3. Tab 1

    Why .png files? They are better than .jpeg files for flat graphics and text and also allow for transparency (so I could leave the rounded corners transparent). And they's better than .gif files in terms of quality.

  3. I saved these files in a folder called "images" and gave them the names "tab1.png," "tab2.png" etc. You can call whatever you like of course, but I use these names in the code below.

Part Two: Create the HTML/CSS Page

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

    3. <div id="mainNav">
    <ul>
    <li id="item1Tab"><a href="#" id="current"><span></span>Item 1</a></li>
    <li id="item2Tab"><a href="#"><span></span>Item 2</a></li>
    <li id="item3Tab"><a href="#"><span></span>Item 3</a></li>
    <li id="item4Tab"><a href="#"><span></span>Item 4</a></li>
    <li id="item5Tab"><a href="#"><span></span>Item 5</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. * {
    margin:0;
    padding:0;
    }

    #mainNav ul li{
    float:left;
    position:relative;
    list-style-type:none;
    width:75px;
    height:25px;
    }

     

    The first style rule uses the universal selector to removes all default margins and padding. The next style rule turns the vertical list column into a horizontal row, removes the bullets, and gives each list item a relative position. The position has no effect of its appearance, but we need it to absolutely position the image on top which we will do next.

  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.We'll apply these rules to the <span> tags inside of the links:

    6. #mainNav #item1Tab a span{
    position:absolute;
    width:75px;
    height:25px;
    top:0;
    let:0;
    background-image: url(images/tab1.png);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    }

     

    #mainNav #item1Tab a:hover span {
    background-position: 0px -25px;
    }

     

    #mainNav #item1Tab a#current span {
    background-position: 0px -50px;
    }

     

    The first rule positions the <span> absolutey, pulling it out of the markup and dropping it on top of the link. It then applies the tab image as a background (but since the <span> item is on op of the text link, the background cover it up).

    The next two rules reposition the tab slightly—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, but 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?

Back to the top

 

Last update: 5/10/10