Five Free CSS Sliding Door Tab Menus
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.
May 3rd, 2008 at 3:41 pm
Very cool!
Nice menus!
Nout van Deijck - Blog
May 5th, 2008 at 8:44 am
Too much elements inside the list. There is no need of “spans”
May 5th, 2008 at 10:10 am
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
May 5th, 2008 at 1:50 pm
Cool! Clean and easy to use CSS tab menus. Thanks.
May 8th, 2008 at 7:36 pm
good work!
May 12th, 2008 at 2:26 pm
CSS menus rule! They’re very practical and elegant. Nice job.
May 12th, 2008 at 2:27 pm
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
May 26th, 2008 at 7:18 pm
beauty.. thanks
June 1st, 2008 at 8:38 am
Can’t get the menu to center… any suggestions?
June 10th, 2008 at 3:32 pm
Those look really nice. I personally like simpler menus but they’ll look sweet on many sites.
June 11th, 2008 at 4:34 pm
good work!
August 4th, 2008 at 4:05 pm
Great work! thanks!
August 30th, 2008 at 3:31 pm
awsome!
glad i found it..
August 31st, 2008 at 3:06 am
How do you center the menu?
September 12th, 2008 at 5:23 pm
@sundown:
Add margin:0px auto; to the #navbar div, and set text-align:center; for body (or container div).
September 12th, 2008 at 8:43 pm
@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?
September 12th, 2008 at 9:30 pm
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 */
}
September 15th, 2008 at 6:45 pm
@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’?
September 15th, 2008 at 10:16 pm
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
October 9th, 2008 at 8:36 pm
Well thankyou very much - nice buttons!