IE Style Tabs in Html

Lot of web applications I’ve worked with have some kind of navigation that is implemented as Tabs. When I first started using tabs in Web Apps, I implemented them in tables, with the left hand side image of the tab in one cell, the middle part in another cell and the right hand side of the tab image in another cell.

That was before I discovered the beauty of CSS. The last few years I have been evangelising table-less design to every project/client that I go to and pretty much wherever I go, I take my “Tab” design with me. I cannot claim any originality to it, though. I first read about the Sliding door technique at “A LIST apart” a few years ago and I’ve been using it ever since.

Here is my implementation of it that resembles the IE 7.0 style tabs.

image

To do this, I created 6 images –

Image Description
tab-background tab-background.png: The background on which the tabs are present
tab-left tab-left.png: The left side of an unselected tab
tab-right tab-right.png: The right side of an unselected tab
current-tab-left current-tab-left.png: The left side of the selected tab
current-tab-right current-tab-right.png: The right side of the selected tab
hover-tab hover-tab.png: The image when you hover the mouse over the tab

The html markup used to define the tabs is a very simple unordered list –

<div id="primaryNavigation">
    <li><a href="#">Tab One</a></li>
    <li id="current"><a href="#">Tab Two</a></li>
    <li><a href="#">Tab Three</a></li>

    <li><a href="#">Tab Four</a></li>

</div>

The markup is simple, because all the presentation information is present in the css file:

body
{
    background:#fff;
    margin:0;
    padding:0;
    color:#000;
    font:10pt Tahoma, Helvetica, sans-serif;
}
#primaryNavigation {
  float:left;
  width:100%;
  background: url( 'Images/tab-background.png' ) 
		repeat-x 100% bottom;

}
#primaryNavigation ul {
    margin: 0;
    padding: 2px 10px 0px 3px;
    list-style: none;
    height: 36px;
}
#primaryNavigation li {
    float: left;
    background: url('Images/tab-left.png' ) 
		no-repeat left top;
    padding: 0px 0px 0px 3px;
    height: 36px;
}
#primaryNavigation a {
    float: left;
    background: url('Images/tab-right.png' ) 
                no-repeat right top;
    padding: 6px 15px 0px 6px;
    text-decoration: none;
    color: black;
    white-space: nowrap;
    height: 36px;
}
#primaryNavigation a:hover {
    color: black;
    background: url('Images/hover-tab.png' ) 
                no-repeat right top;
  }
#primaryNavigation #current {
    background:url('Images/current-tab-left.png' ) 
		no-repeat left top;
    float: left;
    margin: 0;
    padding: 0px 0px 0px 2px;
    height: 36px;
  }
#primaryNavigation #current a {
    background-image: url('Images/current-tab-right.png' );
    color: black;
    white-space: nowrap;
    height: 36px;
    padding: 6px 15px 0px 6px;
}

Pretty simple, huh? This should work in most browsers, although I’ve tested in only on ID 7.0.

Advertisements

8 responses

  1. can u just explain what exactly do you mean by #primaryNavigation , #primaryNavigation ul. Why is the pund symbol used???
    what is its significance??

  2. Hi aditi,

    CSS statements are usually represented in this format –

    [Selector] { [propertyName]: [value]; }

    [Selector] can be either
    * a Html element such as p, li, etc
    * a Class (which will start with a . )
    * an ID (which will start with a #)

    Examples are –

    p { color: #f00}, which means all paragraphs will be in Red as in this example –
    <p>Text</p>

    .Highlighted { color: #f00 }
    for this html –
    <span class=”Highlighted”>Text</span>

    #MyID { color: #f00 }
    for this html –
    <span ID=”MyID”>Text</span>

    This is pretty basic CSS.

  3. Could u tell me how to go regarding the following thing.

    See I have menu kind of at the top like Subjects,…etc. Now when i will hover over subjects menu, i should get a drop down kind of showing various subjects.

  4. Using Jquery, trigger a keypress event on a button or some element based on id or classname:

    $(‘#password’).keypress(function(e){
    if(e.keyCode == 20){
    //caps lock was pressed
    //Do your event here for popup
    }
    });

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s