CSS tabs with Submenus

There’s lots of talk recently about creating tabbed menus with CSS, but very little about associating submenus to the tabs. Joshua Kaufman and Richard Rutter have done it, but their methods require the creation of separate unordered lists that are only associated with the parent menu by the CSS. If you view the page without the stylesheet — with a screen reader for example — the navigation is confusing and impossible to decipher.

I created a method of adding submenus to your tabbed navigation in which the submenu lists are nested into the parent navigation list list. So anyone not using CSS will see a menu that looks like…

  • Home
  • About Us
    • People
    • Careers
  • Contact Us

… and everyone else will see a tabbed menu like …

Screen capture of CSS tabs

I’ve put up a demo page for your enjoyment.

Update: I forgot to mention: please feel free to use the code and mangle or adapt it as needed. If you use it would be nice if you’d tell me where. I’m just curious where it ends up.

gutielua
May 15, 2006 11:54 AM

Hi!

Your CSS Tabs Rocks!

One question, what I need to do to remove the underline for all buttons? Only I want a rectangle, witout underline.

Tnx in advance!

Regards from Monterrey, México.

@ndrés

trimble
July 28, 2006 11:26 AM

Thanks Alan,

Yes, I did eventually figure out how the body id tag controlled the menu’s style. I’ve implemented the menus inside of Div containers and control the their style that way. I love the flexibility and scalability of the menu, but do have a couple of new questions, though.

Is it possible to position the subnav links so that they are relatively positioned to the tabs? Their absolute positioning has been a real pain in the neck for me, as I’d like to use the menus across pages with different side and top margins.

Also, has anyone been able to adapt this css to function as a dropdown menu? CSS-based dropdowns I thus far seen are not nearly so elegant or scale so well as Adam’s, and they don’t degrade well on browsers with limited CSS support (like most PDAs).

Cheers!

allgood2
August 1, 2006 12:44 PM

Hi Adam, Love your tabs and especially the sub-navigation. I’m implementing them on a client’s site, and things look great. I had just one issue: controlling where the sub-menu starts without absolute positioning.

View Test Site http://www.consumer-action.org/housing/test_navigation/ The site layout isn’t fully flexible. Basically, the center container has a defined width, and everything else floats. For the sub-navigation, I removed the absolute {left: 10px; } and the menu kind of floated; but irritating enough, didn’t start until after the main-tab that it was associated with.

I played around with a variety of elements before finally giving the display property: block; a go. This seemed to work, except with some Internet Expolorer issues. Or I should say, it displayed properly on Mac OS X 10.4.x under Safari, Camino, Firefox, and Shiira, and it also displayed properly on Windows 2000/2003 with Netscape 7.2, but only adequately under Internet Explorer 6.x.

I’m no CSS guru. I’m fairly compotent at composing stylesheet; but still only have a basic understanding of why some rules work or don’t work in various situations. I’m wondering if you can think of any “gotchas” from my current approach, versus using your absolute positioning. The site is one of a series of sites, and all of them are contained in a center float, so I’d rather not tie this one down to absolute positioning just to get the navigation items working.

Thanks.

Carsten Kollmeier
February 9, 2007 12:39 AM

Hi!

Your tabs navigation is exactly what I was looking for, thanks!

But I figured out some more: To do an easier positioning of the submenu, I put the whole tab-menu into a div-container with the property “position: relative”. Now all enclosed tags with the property “position: absolute” are positioned relatively to the enclosing div. For explorer to work, you have to give the uppermost ul the property “position: static”, because explorer otherwise seems to inherit the “position” property from the enclosing div.

Furthermore I enhanced your menu to allow some javascript navigation.

See yourself at http://neu.nabeba.de

I’m planing to document this stuff a bit more understandable as soon as I find the time.

JM
February 22, 2007 3:20 PM

Your Tabs Rock!

Carsten Kollmeier
March 12, 2007 7:07 AM

Hi again!

Unfortunatly the javascript-enhance tabs-navigation I mentioned two posts before is not found under the old URL.

This is because it’s the location where I test new stuff before implementing it at the live site. IF you are interested how the javascript stuff looks like: http://www.nabeba.de .

Still, I did not find the time to write a brief tutorial.

youn
May 4, 2007 10:58 AM

i saw some of these tabs on a jeans and clothing website luxuriousgear.com

Vent Swap
May 4, 2007 5:40 PM

I’ve tried your demo but it breaks up in IE7

Jon
June 14, 2007 6:11 PM

Am about to embed your tabs (sans sub-menus) in a brand new time-clock product — you know, the kind in so many warehouses that employees use to punch in / out. The clock features an embedded web server. The product is distributed through major retailers (e.g. Best Buy, Costco, etc.). If it passes our cross-browser testing, it ships ;-)

Good work on keeping things simple and elegant. Thanks.

IE7 Fix
June 18, 2007 2:39 AM

To make the submenus look good in IE7, change the css rules that go:

body.section-1 #menu ul#subnav-1, etc.,

change: top: 95px

to: top: 100px.

Obviously, this will change the way things look in other browsers, so this is not the final solution. Hopefully someone will be able to use this lead to fix the stylesheet.

Avinash Kachhy
August 29, 2007 2:20 PM

I am trying to display a div a ta time on a single html page using css tabs and a javascript function to unhide the correct div and hide the other divs. It works fine but the first time the page loads, all the tabs are in the inactive style. I cannot use the body style for showing the correct active tab. I need to have the left most tab show as active when the page loads but behave as any other tab once any other tab is clicked. I tried generating a click event to change the background on load event, etc. but the display is not affected. Any help will be appreciated. Thanks.

E_McC
February 1, 2008 4:28 AM

I am trying to re create the tabs but only want the sub nav as the main nav. I want to know what type of files as the tools/csstabs/1 , /2, /3 and /4? are they just seperate CSS files? Also I don’t want to go to a new page everytime you click one of the buttons. I just want the text to change?

Could you help me out with this matter?

Thanks

Nutan
December 13, 2008 3:42 AM

Your tab menu is very useful but yet i can’t create menu in which i can show link which is visited in different color as that of other links. how can i do that? can u help me?

Owolabi
June 15, 2009 1:05 AM

I would have loved to use the css sample code to imbibe to my website but could not see it downloaded. Can you send it to my mail please?

Thanks

Rayane
October 31, 2009 12:31 AM

Thanks for this code, could any one send the zip file into my mail: aburayane@gmail.com, can’t find the download link.

Thanks in advance

These are the last 15 comments. Read all 114 comments here.


Your comments:

Text only, no HTML. URLs will automatically be converted to links. Your email address is required, but it will not be displayed on the site.

Name:

Not your company or your SEO link. Comments without a real name will be deleted as spam.

Email: (not displayed)

If you don't feel comfortable giving me your real email address, don't expect me to feel comfortable publishing your comment.

Website (optional):

Follow me on Twitter

Lijit Search

Best Of

  • Embrace the medium The Web is different than print, television, or any other medium. To be successful, designers must embrace those differences.
  • Customer reference questions. Sample questions to ask customer references when choosing a software vendor.
  • Simplified Form Errors One of the most frustrating experiences on the Web is filling out forms. When mistakes are made, the user is often left guessing what they need to correct. We've taken an approach that shows the user in no uncertain terms what needs to be fixed.
  • Debunking predictions Read/Write Web's authors have some goofy predictions.
  • The best of 2006 I wrote a lot of drivel in 2006. Here's the things that are less crappy than the rest.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

Recently

Ideas, Risk, and Investors (Jan 1)
Over at SacStarts, I have piece up discussing a common question I get from entrepreneurs....
VoiceXML for web developers (Dec 17)
Building voice applications isn't hard at all. Any web developer can do it.
De-skunking a dog (Oct 27)
How to clean up your pet after a skunk attack.
Pressure sales via Twitter (Oct 16)
Sticking an ad in my face when we first meet is a good way to lose my interest.
Loma Prieta, 20 years later (Oct 13)
Looking at the earthquake from October 17, 1989
Red light cameras don't work (Oct 13)
Cameras installed to catch people running red lights aren't about traffic safety at all.
Jack-o-lantern pumpkin carving patterns (Oct 12)
It's a tradition, what can I say?
SEO realities (Oct 12)
The real search engine optimization. Works every time.

Subscribe to this site's feed.

Elsewhere

IMified
Build instant messaging applications. (My company)
SacStarts
The Sacramento technology startup community.
Pinewood Freak
Pinewood Derby tips and tricks

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

AIM or Skype: akalsey

Resume

PGP Key

©1999-2010 Adam Kalsey.
Content management by Movable Type.