We had an opportunity to optimize our TabBar navigation component and I thought it would be a great chance to do some abstraction.

Below is the HTML the TabBar generated.


<td>

<img
border=”0“
src=”http://server/graphics/tabs/MyTabs/nav_default_cap_left.jpg“/>

</td>
<td
class=”MyTabs_TabLabels“
onmouseout=”this.className=’MyTabs_TabLabels’“
onmouseover=”this.className=’MyTabs_TabLabels’“>

<a
id=”myTab-0c4bfa69-e888-4295-88ba-0dde5e5ece67“
style=”cursor: pointer;“
onclick=”eProject.Redirect(’/home.aspx’);“>Projects</a>

</td>
<td class=”MyTabs_TabLabels_Right_Cap“>

<img
border=”0“
src=”http://server/graphics/tabs/MyTabs/nav_default_cap_right.jpg“/>
</td>

I realize my HTML code example isn’t very pretty, I’ll have to go looking for a good plugin soon.

Some of the things bad about this.

  • Table cells just for a graphic.
  • Graphics inline with the HTML (so style is not seperated by a stylesheet)
  • Javascript is embedded in the HTML so its not late bound.
  • style=”cursor:pointer” on the Anchor.
  • We would prefer not to use Tables at all for this control, its a list of links, so we should be using UL, LI, and A.

In our refactor we resolved the majority of these issues, with the exception being the last bullet on a table being used. The complexity of switching it to a UL was a bit more work then we could get time for in our sprint, so it gets pushed to another day.

Lets start with the roundedness of the tabs.

tab_left.jpg tab_bg.jpg tab_right.jpgHastily blown up to show them as they were only 1 pixel wide.

Because they are not fixed width, we needed the middle body of the tab to grow based on the size of the text, and then we would append the two edge images at their appropriate positions.

To do this we need 3 elements, basically a background holder for each image.


<td>
<a href="#">
<h3>
<span>
Home
</span>
</h3>
</a>
</td>

Yak all you want about the different tags you should use inside an anchor tag, it doesn’t matter for a technical standpoint. (Semantically I’m sure someone will have a firm reason which direction to take).

From here, you need some different css styles to apply our effects.


.TabBar {
margin:0;
clear:both;
background-color: #FFF;
}
.TabBar TD {
vertical-align: middle;
padding-left: 2px;
}
.TabBar a {
color:black;
text-decoration:none;
display:block;
background:url(tab_bg.jpg) repeat-x;
height:25px;
line-height:25px;
cursor:pointer;
}
.TabBar a H3{
display:block;
margin:0;
padding:0;
background:no-repeat url(tab_left.jpg);
vertical-align:middle;
white-space:nowrap;
}
.TabBar a span{
display:block;
padding:0 14px;
background:no-repeat url(tab_right.jpg) top right;
font-family:arial,sans-serif;
color:#333333;
vertical-align:middle;
font-size:13px;
font-weight:normal;
white-space:nowrap;
}

So our TD is wrapped in a table with class of TabBar and our styles are applied.

This should produce a tab that looks like this.

Finished Rounded Tab

Now to give a mouse over effect, we just need to use the A:hover pseudo class to change the background of the three elements.


.TabBar a:hover{
background-image:url(hover_bg.jpg);
}
.TabBar a:hover H3{
background:no-repeat url(hover_left.jpg);
}
.TabBar a:hover span{
background:no-repeat url(hover_right.jpg) top right;
}

So when you mouse over the element, the CSS parser applies a whole new set of classes to the elements underneath, yet it also keeps the previous classes intact as well. Here is what the tab looks like on mouse over after the resulting CSS is added to the page.

hoverbutton.gif

2 comments

2 Responses to “Creating rounded tabs with on-hover effects and no Script.”

  1. Thomas Williams Says:

    G’day Black Belt – I agree: your new, revised HTML is much better than the original.

    Have you seen the “sliding doors” technique, with two images, and one nested SPAN inside an anchor? The cleanest examples are at http://www.exploding-boy.com/images/center/center.html & http://www.tyssendesign.com.au/articles/css/background-changing-sliding-door-tabs/

    Cheers,

    Thomas

  2. Kris Gray Says:

    I like those. With a sliding door technique it would make sense that we could probably do this with 2 tags instead of 3.

    Thanks Thomas, I’ll probably get one of these working for the next time.

Leave a Reply