Dave Woods - HTML, CSS, Web Design
Personal Website of a Web Designer
Subscribe in a reader
CSS Tabs Menu
Published by Dave | Filed under CSS Menus, CSS, Web Design
Using an unordered list and a couple of images, we can use CSS to create effective tabbed navigational menu’s which this tutorial will demonstrate.
This demonstration uses the Sliding Doors technique which not only allows for long text but also enables the user to enlarge the text within their browser without breaking the tabs.
Example
The Images
To start off with you’ll need a couple of images.
The first is the left part of the tab which is cropped to just show the top corner and left side of the image. The top part shows the standard state whilst the bottom of the image shows the image in it’s hover state.
The second image contains the top part of the tab and the right edge. This image should always be wider than required and should also be large enough to cater for font size enlargement so as you can see from the image below, this is much wider than will actually be viewable within the navigation.
These two images can be downloaded from here:
The HTML
<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Links</span></a></li>
</ul>
The CSS
The first part of the CSS should be pretty straight forward. Initially we’re just redefining the styles for the unordered list, the list items and the body whilst using the global reset method to remove padding and margin’s from all elements on the page.
* {
padding: 0;
margin: 0;
}
body {
font-size: 73%;
font-family: verdana, arial, helvetica, sans-serif;
padding: 10px;
}
#navigation {
list-style: none;
overflow: auto;
}
#navigation li {
float: left;
background-color: #666; /* to cater for users without images */
}
Next comes the step of applying the background images. Firstly we’ll apply the tabright.gif image to the link and position it to the right to show the curved corner. We also need to use display: block; to ensure that the link fills the list item otherwise this style will only affect the actual text.
The next step is to apply the tableft.gif image to the span so that it sits to the left of the tab.
#navigation a {
display: block;
background-image: url(tabright.gif);
background-position: top right;
background-repeat: no-repeat;
color: #FFF;
text-decoration: none;
font-weight: bold;
}
#navigation span {
display: block;
background-image: url(tableft.gif);
background-repeat: no-repeat;
padding: 5px 15px;
}
With the tabs now in place we can manipulate the background image so that it shifts upwards when the user hovers over the tab.
The hover state image resides at 198px down the image so we just need to shift the position of both images up to achieve this simple effect.
#navigation a:hover {
background-position: right -198px;
}
#navigation a:hover span {
background-position: 0 -198px;
}
Summary
And that’s all there is to it. A cross browser CSS tabbed menu with hover state which works on all browsers including IE5.01 and upwards whilst degrading gracefully for even older browsers or non-CSS supporting devices.
As usual, please feel free to leave any comments or question as well as suggestions for improving any demonstrations featured on this site.
October 10th, 2007 at 9:31 pm
Is this 508 compliant?
October 10th, 2007 at 10:06 pm
Hi Jim,
It hasn’t been tested but it should be.
The menu is simply an unordered list which means that without images or CSS, the user will get an unstyled version… not as pretty but still completely usable.
The only thing you may have to change is to provide a background colour as I’ve just noticed that disabling images means that you get white text on a white background.
That’s an easy fix to put in though so I’ll update the tutorial shortly.
If anyone does spot any other reasons why it wouldn’t be accessible, please let me know but as far as I’m aware the menu should pass AAA Prioty 3 WCAG and Section 508.
Hope that answers you question.
October 10th, 2007 at 10:25 pm
Nice tutorial and nice work. I like the tabbed approach to menus very much. One of our product sites uses a very similar menu style in case you want another example to look at. I think it looks really nice and functions very well even integrated on a CMS.
http://www.speaklight.com
October 11th, 2007 at 11:58 am
@Tim, Thanks for the other example as it looks like it uses a similar technique. I’ve seen quite a few that use the sliding doors method but thought I’d try and take it a step further by providing the hover state as well as I’m not sure I’ve seen this done elsewhere? (Not cross browser that supports IE5 atleast).
@Jim, I’ve updated the tutorial and code so that it now also works for users with images disabled. This has been done by simply providing a background colour on the list item which will only be seen when images are hidden.
October 16th, 2007 at 9:34 pm
Sweet! I found this tutorial concise, practical, easy to follow, attractive and impressive. Good work. Thanks! Helped me to finally understand a number of CSS properties.
October 16th, 2007 at 9:54 pm
Sorry, newbie question, how do i get the different content associated to the different tabs ? Do I have to create new pages for the different tabs? And I re-create the whole thing in every page then for the tabs to work?
October 17th, 2007 at 10:00 am
@Ryan - Thanks, I’m putting together a tutorial to include a sub-level dropdown menu with this as well so you might find that useful
@AD - Yeah that’s how it would work. The a href would need to point to the relevant HTML page which when clicked would take you to that page. There are dynamic solutions which enable you to include the same code on multiple pages so that you only have to update it in the one place but if you’re a newbie then it’s probably best for you to understand the basics of HTML and CSS first before delving into something like PHP. Hope that helps.
October 18th, 2007 at 9:52 am
[…] CSS tabs menu tutorial […]
October 22nd, 2007 at 10:24 am
[…] the full story here Filed under: html […]
October 23rd, 2007 at 1:27 pm
This was a very straight-forward tutorial, thank you. I usually get lost halfway down on these, but yours managed to keep me on the train until the station :D.
October 24th, 2007 at 8:07 am
So what would you do if you need another colour for the current/visited page?
Create another image?
October 24th, 2007 at 8:44 am
Hi Jermayn,
That would be one solution although you could also add a third image to the existing one, supply a class and then shift the background for the .current class accordingly.
Either solution would work though and I may put a demo together to show how this could work.
Thanks
November 29th, 2007 at 3:57 pm
Newbie. How do you get something like http://www.seattlechildrens.org/ have?
November 29th, 2007 at 4:24 pm
Hi Una,
You could achieve something like that by using the menu in this tutorial and then add another unordered list in the same way and just give it a background colour that matched the bottom of the tab.
I’m making a list of all the tutorials that are requested so I’ll add this to my list and will be featured here soon.
Thanks.
December 12th, 2007 at 8:23 pm
Hi Dave
this is a fantastic tutorial. I will also be eagerly awaiting the tutorial that Una is looking for. I am not sure how to do it myself :-*
I would like to put menu hints in this bar to give people clues about what the contents of the page is when they hover on the tab.
December 12th, 2007 at 9:02 pm
me again
I would like to align the menu in the center of the page (not left). Is this possible or does it break the positioning of the list?
December 13th, 2007 at 10:44 am
Hi Mooshoe, I’m not entirely sure if that would be possible at least not with the way it’s currently setup. To center the menu you’d need to apply a width to the ul and then use margin: 0 auto; however this would cause problems when the text was resized.
There should be a solution though so I’ll have a look into that.
I’ll make the horizontal sub menu the next thing on my list of things to write about.
January 7th, 2008 at 1:56 am
Dave,
one of the easiest ways I’ve come across to manage tabs - appreciated. One Question: I’d like to centre the tabs within my page - so when they overflow for example the tabs centre on the next row - at the moment they are left-aligned - and I can’t seem to change this.
Help appreciated!
Thanks, Nigel.
January 7th, 2008 at 11:49 am
Hi Nigel,
That’s not really possible as far as I’m aware as you need to float the list items left in order to line them up next to each other and this then overrules any text-align value which would be needed.
The closest I’ve come to creating this effect is here…
http://www.dave-woods.co.uk/wp-content/uploads/2008/01/tabs-center.html
However, it requires a width and doesn’t really do what you’re after either.
I’ll have a think and see if there is a better solution though but nothing immediately springs to mind unfortunately.
Sorry about that.
January 9th, 2008 at 6:59 pm
Dave,
How would i go about implementing next tab and prev tab buttons
thanks,
Nick
January 10th, 2008 at 4:34 pm
Hi Nick, I’m not quite sure what you’re asking? Are you talking about visually or the functionality for this? Do you have an example which demonstrates it so I can get an idea of what you’re asking? Thanks.
January 23rd, 2008 at 4:05 pm
Thanks tons for this. I tried some other tutorials yet this is the only one i got to work! keep the good stuff coming!
February 26th, 2008 at 7:09 pm
Hello…
Is it possible to keep the tab in the same state as when mouseover when clicked on it.
So, when I click the tab, it looks the same when on mouseover. That way you see where you are on the site.
I tried with a:active
but that didn’t work for me.
It would be very uselful if you could explain this.
And please, wiyhout JS if possible
I hate JS…
Great tutorial btw
April 4th, 2008 at 9:08 pm
Bit late to this party, but wanted to say thanks for sharing this.
It’s a Great tut.
Gareth