Making use of last years free Web 2.0 buttons I’ve produced a collection of five free complete CSS tab menus, making use of the sliding doors technique which allows the tabs to expand horizontally depending on the length of the contained text.

Take your pick of Black, Blue, Green, Grey or Red, with each menu being available to download as a zip file containing the relevant files. Open the html file into an editor or view the source and copy the CSS code and unordered list into your own documents, then replace the textual content from within the list items with your personal menu titles.

The menus have been tested and appear to work without issue in Firefox, IE7, IE6, Opera and Safari.

Share on Pinterest
There are no images.
34 Comments submitted Add yours!
Subscribe receive Spoon Graphics newsletters

Subscribe to my newsletter to be the first to hear about new posts


  1. I originally produced a menu without the span tags, by using the :hover pseudo class on the actual list item. Unfortunately this isn’t supported by IE6 so the span tags have to come out to play to solve this. :-)

    At least the future of CSS3 will allow for an even better solution with multiple backgrounds!


  2. I really like the black one. I also downloaded it and I like that you keep your code clean and tidy.
    Free stuff is always useful.
    Liked your page for stumbleupon

  3. @Patrick
    thanks, but where exactly do I have do insert
    margin:0px auto;
    I tried several posibilities, but I am not a css pro, rather a beginner. So could you post the adapted code?

  4. Of course. Using the “Black” template, the code is below. You’ll need to specify a width property for the div to center, so change “520px” to the appropriate width after you’ve made changes to the menu names.

    * {
    margin: 0;
    padding: 0;

    body {
    margin: 30px;
    text-align:center; /* THIS WAS ADDED */

    /* THIS WAD ADDED */
    #navbar { margin:0px auto; width:520px; }

    #navbar ul li {
    display: inline; /* Fix IE Step Down */

  5. @Patrick
    thanks a lot, I got it and it works :)

    but one thing I still do not understand is how you got the value of the width (520px) and why it is necessary to indicate the width at all. Without the width the whole nav floats back to the left…but why does this happen although the left and right margin is to set ‘auto’?

Comments are now closed