Dave Woods - Freelance Web Design Warwickshire

CSS Tabs Menu

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.

Please note: an updated version of this article is now available here: CSS Tabs

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:

tableft.gif
tabright.gif

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.


28 comments on “CSS Tabs Menu

  1. Dave Post author

    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.

  2. Tim Wall

    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

  3. Dave Post author

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

  4. Ryan

    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.

  5. AD

    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?

  6. Dave Post author

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

  7. Pingback: Dave Woods - HTML, CSS, Web Design » CSS Tabs Menu with Dropdowns

  8. Pingback: echo20 » Blog Archive » CSS Menu Example

  9. Pinny Cohen

    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.

  10. Dave Post author

    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

  11. Dave Post author

    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.

  12. mooshoe

    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.

  13. mooshoe

    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?

  14. Dave Post author

    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.

  15. Nigel

    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.

  16. Dave Post author

    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://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.

  17. Dave Post author

    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.

  18. Ben

    Thanks tons for this. I tried some other tutorials yet this is the only one i got to work! keep the good stuff coming!

  19. .DIN

    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

  20. Gareth

    Bit late to this party, but wanted to say thanks for sharing this.
    It’s a Great tut.

    Gareth

  21. Ashley

    How can I get the hover to work in IE5-IE6 for all of the tab, not just the text. Currently the hover state only works when hovering right over the text.

  22. Alexander

    Answers all my questions. Very nicely done!
    Very good tutorial! And yeah, keep a good stuff coming!!!

  23. Adam

    Just wanted to say THANKS. This was a great tutorial and I found it right when I was in the middle of a project and needed a solution to my problem. Usually that can take a few hours of searching the web for that right answer, but thanks to your site I found it right away!

    So both myself and my client say Thank You