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.
Unlimited Downloads: 1,200,000+ Illustrator Brushes, Freebies, Photoshop Actions, Stock Photos & Design Assets Ad
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.
Very cool!
Nice menus!
Nout van Deijck – Blog
Too much elements inside the list. There is no need of “spans” :)
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
Cool! Clean and easy to use CSS tab menus. Thanks.
good work!
CSS menus rule! They’re very practical and elegant. Nice job.
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
beauty.. thanks
Can’t get the menu to center… any suggestions?
Those look really nice. I personally like simpler menus but they’ll look sweet on many sites.
good work!
Great work! thanks!
awsome!
glad i found it..
How do you center the menu?
@sundown:
Add margin:0px auto; to the #navbar div, and set text-align:center; for body (or container div).
@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?
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 */
}
@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’?
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
Well thankyou very much – nice buttons!