Blog.SpoonGraphics

Five Free CSS Sliding Door Tab Menus

Read the article

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.

Join the mailing list and receive my design resources bundle FREE!

Join the mailing list to have every new post hand delivered to your email inbox. Every subscriber gets a FREE bundle of 40+ icons, vectors, brushes & textures!

34 Comments

  1. Too much elements inside the list. There is no need of “spans” :)

  2. Chris says:

    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!

    Chris

  3. Cool! Clean and easy to use CSS tab menus. Thanks.

  4. in-sanity says:

    CSS menus rule! They’re very practical and elegant. Nice job.

  5. Sava says:

    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

  6. BARIN says:

    beauty.. thanks

  7. adrien says:

    Can’t get the menu to center… any suggestions?

  8. Adam says:

    Those look really nice. I personally like simpler menus but they’ll look sweet on many sites.

  9. free wii says:

    Great work! thanks!

  10. web-d says:

    awsome!
    glad i found it..

  11. sundown says:

    How do you center the menu?

  12. @sundown:

    Add margin:0px auto; to the #navbar div, and set text-align:center; for body (or container div).

  13. sundown says:

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

  14. 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 */
    }

  15. sundown says:

    @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’?

  16. excellent resource, cheers! sliding doors rocks!
    extra spans for ie6 are a pain but looks like we’re stuck with the extra markup for a while yet..booooo

    thanks again

  17. Well thankyou very much – nice buttons!

Comments are now closed