Sponsors:

CSS Overlapping Tabbed Navigation

Mar
28

Overlapping tabbed navigation in CSS have always been a nuisance with me often running into cross-browser compatibility issues or bloated code when developing them. 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

Write a comment

Apr
7

thanks by opridai

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

Apr
7

That's okay by admin

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

Apr
10

Nice! by Lena Shore

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

Apr
30

Re: by waqas

Thanks, nice work... :)

May
12

www.paintworkzstudio.co.uk by Paintworkz Web Design

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

May
12

http://www.webpixelkonsum.de by webpixelkonsum

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

Ralph

May
17

WoW and I thought I saw them all by John Sullivan

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

CSS Overlapping Tabbed Navigation by S.Shekhara

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.