Mar
28

CSS Overlapping Tabbed Navigation

Overlapping tabbed navigation in CSS have always been a nuisance with developers often running into cross-browser compatibility issues or bloated code. There are some other examples floating around the internet, though it seems there aren't any really practical cross-browser compatible, accessible, expandable (menu item length and menu item quantity) and using minimal CSS and XHTML.

I have created what I believe to be a working prototype, though I am no accessibility expert and am open to opinions and criticism. You can see four of the tabbed navigation examples below:

These navigation tabs are completely customisable and tested in IE 5.5, 6, 7, Firefox 2.0.0.13, Opera 9.25, Safari 3.0.4 (All on Windows). If anyone finds any incompatibilities, please don't hesitate to leave a comment and I'll try to fix it straight away.

The CSS also uses the box model hack to support IE5. If you wish the CSS to validate, then you can sacrifice the IE5 support to accomodate it.

The example above uses an CSS image preloader technique. This is not essential though it is highly recommended as otherwise the menu rollovers will suffer some lag. More information on this technique can be found here.

You can use these menus for free; the source is available below:

Download Source

Next One

Comments?

Could I please ask that all comments are kept civil and that no one spams.

Apr
07

opridai Says:

Thank you so much for sharing ........ :)

Apr
07

admin Says:

That's quite alright. I hope they come in useful.

Apr
10

Lena Shore Says:

Great share! Super nice menus and I'll get to learn a little something. Thank you.

Apr
30

waqas Says:

Thanks, nice work... :)

May
12

Paintworkz Web Design Says:

Thanks for this great post, And for the download too.

May
12

webpixelkonsum Says:

My personal favorit is example four. Thank you for sharing the source code.

Ralph

May
17

John Sullivan Says:

well sir you obviously know that your design is tight as f*ck :)
You just found yourself a new student and FAN.You got the CSS flowing whats up with the LINK LOVE-hit me up on http://potpolitics.com with the nofollow attributes.
Coincidentally after a few months of messing around I'm ready to kick it up a few notches.I have a feeling I will be studying right here.I hope to have an excellent example asap.
Thanks

Jun
27

S.Shekhara Says:

Your Illustrations are very good, simple and scalable.
It serves my need for fixed menu items with matching color combination with the site without using javascript.
Thanks a lot.
Keep it up.

Apr
19

udon Says:

thanks...

Jun
12

Kelly Brown Says:

Hi, very nice post. I have been wonder'n bout this issue,so thanks for posting

Jun
15

KattyBlackyard Says:

The article is ver good. Write please more

Sponsors: