Comments

Comments for CSS tabs with Submenus

Excerpt: Accomplishing tabbed menus with submenus using only CSS and semanticly-correct HTML. Read the whole article…

Steven Garrity
May 15, 2003 8:13 PM

Very nice.

Clint Laskowski
May 15, 2003 9:18 PM

I'll take one Death Ray, please :-)

choan
May 16, 2003 2:35 AM

It works in IE5.5 too. Great idea, great implementation.

Dan F
May 16, 2003 5:02 AM

nice!

Joshua Kaufman
May 16, 2003 6:45 AM

Very nice, Adam. My only comment is that the HTML isn't valid. The nested list belongs within the li element.

Andreas Bovens
May 16, 2003 8:37 AM

Hi Adam, I had a similar problem with Opera when defining submenus as nested lists. Finally Radu Darvas found a solution (see http://www.web-graphics.com/mtarchive/000852.php.) I had a look at your code and suggest you add body {padding: 0px;} body.section-1 #menu ul#subnav-1, body.section-2 #menu ul#subnav-2, body.section-3 #menu ul#subnav-3, body.section-4 #menu ul#subnav-4 {width: 100%;} to your stylesheet so as to make it render in Opera 7.10, too. Cheers.

Adam Kalsey
May 16, 2003 8:58 AM

I knew that something was wrong with that HTML, but I was too brain-dead to see it. And I hadn't gotten around to running it through the validator yet. The nesting is fixed and proper now. I figured that someone else had come up with a similar solution, since the problem just didn't seem to be that hard. Thanks to the comment from Andreas Bovens I found the discussion on webgraphics that has links to lots of different css tab implementations, including one with nested submenus, developed right around the time I was working on mine. I wish I'd found it sooner. It would have saved me a lot of work. And it's beautiful design to boot: http://www.homelesspixel.de/tabs/tabs.html I'm going through all the CSS tab implementations that are linked in the webgraphics discussion and will add the interesting ones to the list at the bottom of my tab page.

Jose Silva
May 19, 2003 3:20 AM

Great implementation, i just have one question , how did it works ? When we click on any tab, it shouldn't close the bottom border of the open tab and open on the new?? Here it won't do it. thanks

Adam Kalsey
May 19, 2003 8:31 AM

The demo page is working fine. If you aren't seeing the abs change, then perhaps it doesn't work in your browser. Let me know what browser you are testing this in. If you are having trouble getting this to work on your site, they key is the class attribute of the body tag. You need to change the class to reflect the section you are in.

Jose Silva
May 20, 2003 12:54 PM

Thanks Adam, is that the key that was missing to me, the class of the body tag chages :) Great Job

Romain
May 21, 2003 8:15 PM

This is a great piece of CSS. But I've discovered some weird bug that I cannot trace. You can reproduce the bug on the latest versions of Safari (v74), Camino (0.7), and Mozilla (1.3b), but it cannot be seen on Explorer (5.2.2), all on Macintosh. The CSS seems to define sizes that don't fit in the window, leading to the creation of an horizontal scrolling bar, ONLY when you are in presence of submenus. On Explorer you don't see nothing (which is great). On Safari and Camino, you'll notice the apparition of a scrolling bar at the bottom of the page, and the left and right thin border of your layout will slightly move depending of the presence of a submenu or not (very distracting once you notice it). On Mozilla, only the scrolling bar will appear, but the right and left border stays at the same place. Don't know (yet) if it's something that can be fixed (simply), I'll work on that tomorrow.

Romain
May 21, 2003 8:35 PM

Correction, actually Safari, Camino, and Mozilla will all (and only) create a scrolling bar at the bottom. I was basing my previous comment on a modified example... But still, those scrolling bars are intriguing.

Adam Kalsey
May 22, 2003 8:19 AM

The subnav had a width: 100% declaration in the style. Since it wasn't starting from the flush left, that caused it to overflow the browser width. I've reduced it to 90% which should fix the problem.

michael efford
May 24, 2003 8:55 AM

Lovely stuff! I just asked (and referred to) this on the css-discuss (http://www.css-discuss.org) list. Do you know of a way to implement the same system but using relative positioning to position the sub navigation? If so, it truely would be a thing of beauty :)

Adam Kalsey
May 24, 2003 9:05 AM

I'm working on that, but all of the solutions I've found so far break compatibility with many of the browsers.

Gus Gollings
May 25, 2003 8:29 AM

Nifty stuff, Adam :^) Maybe it would be reasonable to use fixed text sizes for the navigation menu so as not to break the illusion of folder tabs when using the browser's text size magnification (or text size reduction). Or, better still, use relative sizing for the padding and margins so as to preserve the illusion of tabs when forcing the text to scale on the browser.

Carsten
May 26, 2003 2:50 AM

Great work. Not to brag (but maybe a little!), but I was developing exactly the same method for pure CSS-tabs. My method coincidently uses the ID of the body to determine which tab should be highlighted. Haven't incorporated it in any site yet. By the way, I did the nesting of lists correctly right from the start, heheheh ;).

Michel Parmentier
May 26, 2003 11:17 AM

I think my previous comment must be wandering in the ether as it was not published ... Here it is again : Great work Adam, but that doesn't make it. Granted the tabs work alright and the list elements display as necessary. But what is really missing is the display of divs of different *content* along with the corresponding tabs. The closest tabs visual effect is achieved by Ian Andolina's tabs, except it doesn't use the same page: although each time a tab is clicked, another tab is displayed with different content, this is achieved by *loading* a different page. In that case there is no point in playing with CSS : we could just as well load the new page with a different tabs image (for instance) to make the trick. The challenge is to display a content element (div) below the list elements with would hide or show its content along with the corresponding tabs. Some CSS tabs experiences came very close to that, but none (that I know of) did it with changing the displayed content of the *same* page. So what we need is this : 1. only one page is loaded; 2. on that page you can display different sections content by clicking a tab 3. the proper tab effect (like on this page) is achieved *only* by CSS, NO javascript involved. 4. It should use valid markup and display properly across different browsers/platforms If I'm not wrong, this has not yet been done. I've been using a javascript solution for three years; there are several solutions which work by loading a different page and of course there are the flash solutions like on espn. As several people work hard on those pure CSS tabs, I think we are close to making it. Thanks for your nice work !

Adam Kalsey
May 26, 2003 12:43 PM

First of all, it's impossible to change content with pure CSS. The link has to have some action for the browser to take, and without changing the URL or using client-side scripting, that can't happen. CSS doesn't have the capability of handling a link. Secondly, what would be the point? What problem would be solved by not using separate pages? I can't see an upside, but I see plenty of downsides. By placing all the content on a single page, you have increased the page size, filling it with content that the visitor might not be interested in seeing. Since each page does not have a unique URL, they can't be bookmarked, emailed, or linked. Some browsers retreive the page a second time before printing so they couldn't properly print the pages. They'd always print the first tab. People who don't have CSS support would instead see a very long page without any context between "pages." So blind users with screen readers, mobile phone users, and PDA users would have a difficult experience. If you want to see why someone would want to use CSS tabs instead of images, try viewing the tab demo without stylesheets. You'll still have a useful page. Using images when they aren't neccessary adds to page size and reduces portability to non-pc plaforms.

Brad Smith
May 26, 2003 7:47 PM

For some reason when I view the demo page ( http://www.kalsey.com/tools/csstabs/ ) the text is rendered with a serif font of some sort. The css defines Verdana and other sans serif fonts for body but is somehow not being rendered. I am using Mozilla 1.2.1 on redhat 9. This weblog is rendered nicely in a sans serif fonts. Brad

Andrew Macdonald
May 27, 2003 1:41 PM

Seemingly (now whether this is just me) you are unable to add a fifth tab with its submenus. The Fifth main tab is displayed, however the submenus never are. There is nothing wrong with the code that I can see nor can all the validators therefore what is wrong. Has anyone else encountered this problem? Testing on Mozilla 1.31 and IE6 (neither of which shows the submenus). You can see what I have tried at http://members.rogers.com/archdata/tabs1.htm . Having spent several hours and more coffee than I think I can handle I send it out into the net ether to see whats up.

Andrew Macdonald
May 27, 2003 2:16 PM

Hmmm.. not enough coffee... I find that when the code reads UL instead of LI things tend to work better. Apologies to all - but this always happens - you only find a mistake of your making after you ask for aid. Called the 'head slap' reaction.

Michel Parmentier
May 27, 2003 11:21 PM

One of the great use of tabs is to display different related sections of one subject; for instance: - a tutorial in 4 parts or - an news article spanned over 5 pages IMHO, the use of tabs is very useful in these cases. Then, it *is* possible to "change" the displayed content by using pure CSS. There has been a lot of discussions on that subject on the CSS-discuss list. Some interesting experiments have been done (I don't think they're in your links): - http://rupert.mintchaos.com/test/layoutage/misc/tabbedmenu4.html# and with a more tab looking interface : - http://www.simonsays.ca/SSTabsincss.html#Tab1 This last one changes the content when hovering over the tabs, which I find less effective then when clicking. So, I'd like to see a change of the displayed content with the overall look that you achieve on the demo. I tried to combine the techniques to get what I want but I'm not that good at playing with CSS. Maybe *you* can do it... :-)

Giuseppe Pessia
June 1, 2003 4:46 PM

Geniale!

Adam Kalsey
June 2, 2003 11:53 AM

I've been trying to get to the rupert.mintchaos.com page for a week and it's been down. Perhaps there's a typo in the domain? The reason why the tabs in the other example change content is because they use the :hover psuedo class. CSS can change display properties when you hover your mouse, just like the changing colors in my tab demo, but CSS doesn't have the capability of responding to a click, so you can't change document contents on click using only CSS. I mentioned the problem of the additional tabs not having discrete URLs. You said this is fine for "a tutorial in 4 parts or an (sic) news article spanned over 5 pages." What if the user wanted to bookmark page three in the tutorial? Or email the fifth page in the news article to a friend. Unless the page has a URL, these things can't be done. You have the same problem as sites with frames or composed entirely in Flash.

Camilo
June 3, 2003 10:21 AM

Elegant. I am going to imitate, giving you the credit, of course.

Trackback from Raible Designs ~ We Build Web Apps
June 3, 2003 2:44 PM

Tabbed Menus - now with DHTML!

Excerpt: I did some work this evening to adapt Adam Kalsey's Tabbed Menu demo to fit my own design. He simply changes the <body>'s class based on which tag the user has clicked on. While this seems reasonable, I'd rather do the m... [The Web, 750 chara...

Trackback from Raible Designs ~ We Build Web Apps
June 3, 2003 2:45 PM

Struts Menu now support tabbed menus!

Excerpt: I uploaded a new demo of the tabbed menu system. This one uses url-matching to determine which menu to activate. If it finds more than one menu item (that matches the current URL), it falls back on a cookie that is set when you ... [Java, 789 chara...

Matt Raible
June 3, 2003 5:45 PM

I tried trackback, but it didn't work, so here's what I've done with your example: http://raibledesigns.com/page/rd/20030603#struts_menu_has_tabbed_menu Thanks! Matt

taine
June 4, 2003 4:52 PM

The thing that seems most strange to me is that removing the "top" position from "body.section-1 #menu ul#subnav-1..." in the css prevents Mozilla 1.4 from treating the tab links as links. It formats them based on the css, it displays them in the links section of document properties BUT it won't respond to clicks nor does the mouse pointer change. The sub links continue to work fine. IE6 has no problem with this. Hmmm...

taine
June 5, 2003 6:43 AM

Well - It so happens that I wasn't paying attention completely. By using padding-top to move the sub menus down into postion instead of margin-top I was "covering" the tabs in Mozilla. It appears that the "box" was transparent to the mouse in IE but not in Mozilla.

Ben Pollinger
June 6, 2003 1:10 PM

I like this a lot, and have been trying to redesign my site with it - see http://www.psyclick.34sp.com/redesign/ As well as Opera 7 and Mozilla, it works fine with IE 5.5 and 6 on Win98. IE5.0 has a problem though. There is a slight gap between the menu and submenu, buit I can live with that. For some reason, the submenu lists downward rather than across. A small screenshot is here [2kb]: http://www.psyclick.34sp.com/redesign/ie5error.png You can read my CSS here as TXT: http://www.psyclick.34sp.com/redesign/psyclick-tab.css.txt Any ideas anyone? I'd love to roll this out, but quite a few of my users are stuck with IE5 at work.

jon
June 21, 2003 9:23 PM

using your CSS tabs at tff tech, LLC: http://www.tfftech.com/dmain nice. j.

Chad Coffman
June 25, 2003 9:16 AM

I'm planning to use your excellent tabs in our new Departmental (all CSS) website, at the University of Colorado at Boulder - unfortunately, when I add a second picture to the top of the page and attempt to position it (using HTML or CSS) to the right, the links don't work in Netscape 7. I have tried many configurations of CSS and HTML. I have a stylesheet that is the basic layout which I have pared down to only three very small elements. I float the right element 'right' and if I don't do something to specifically position the left image 'left' (either float: or using the margin: descriptor) the right element won't stay on the first line. If I do use these elements to position, everything LOOKS great, but the links in NN 7.0 don't work, as described above. I have tested this in NN7 Mac and PC and IE 5 & 6 Win and IE 5.1 Mac. We have decided that NN4 will see straight HTML. Thanks for comments

Chris
June 26, 2003 1:31 PM

Hi, After spending some time building my own version of a tabbed menu in CSS I found your version, which is much more elegant. I'm using most of your version on my site. Any pointers as to how you include it using php? Chris

jon
June 30, 2003 11:39 PM

Chris, for an example of using it with PHP, take a look at the site i posted above: http://www.tfftech.com/dmain i basically add a parameter to my query string that will change the id (or class, whichever applies) of the body tag to correspond with which tab should be highlighted. hope this helps, j.

jon
June 30, 2003 11:39 PM

should have looked at your site first--looks like you've figured it out ;) j.

Bill Wolff
July 2, 2003 12:37 PM

This is great! I've been trying to implement it on my site, but am having trouble getting the current page tab bottom border to disappear. The site (underconstruction as of this writting is at http://www.cwrl.utexas.edu/~wolff/wolff_web/index.shtml. Any suggestions you have would be greatly appreciated. You'll notice that I have changed the body to tab because I thought that calling it tabs was more helpful to me, but that may be causing some problems. . . . Thanks.

Adam Kalsey
July 2, 2003 12:55 PM

Since TAB isn't a real HTML tag, I have no idea how browsers would interpret that CSS.

Jose Fandos
July 3, 2003 11:07 AM

As suggested to Adam by email, there is an improvement you can do to the tabs css that will keep the mouse from showing the hand when it's over the tab of the page you are in. Just change add the following declaration cursor: default; at the end of the following two rules like this: body.section-1 #menu li#nav-1 a, body.section-2 #menu li#nav-2 a, body.section-3 #menu li#nav-3 a, body.section-4 #menu li#nav-4 a { background : #fff; border-bottom : 1px solid #fff; color : #000; cursor: default; } and body.section-1 #menu ul#subnav-1 a, body.section-2 #menu ul#subnav-2 a, body.section-3 #menu ul#subnav-3 a, body.section-4 #menu ul#subnav-4 a { background : #fff; border : none; border-left : 1px solid #ccc; color : #999; font-size : smaller; font-weight : bold; line-height : 10px; margin-right : 4px; padding : 2px 10px 2px 10px; text-decoration : none; cursor: default; } Regards, Jose Fandos

Anton Zuiker
July 6, 2003 3:48 PM

Since I'll never climb Everest, why not pull myself up the CSS mountain and learn what seems a difficult skill -- your CSS tabs looks great, and I want to use it for a redesign of my site, but I'd like to include another column of content on the right side of the page. See http://www.zuiker.com/hey/tabs/zpages.php for my beginning attempts (I'm a CSS novice, btw). Can you please point me to other sites with the tabs and two- or three-column layouts?

Adam Kalsey
July 6, 2003 4:01 PM

The tabs are going to be completely independent of any multi-column layout you do. So you should be able to copy my tab HTML and CSS into the HTML and CSS of a two or three column layout and everytihng will work. Depending upon the layout you use, you might need to adjust the positioning of some the columns.

Tom Smart
July 10, 2003 12:18 PM

Hi, Brad Smith. The reason the fonts are not rendered is because: font: Verdana, Helvetica, Arial; should read: font-family: Verdana, Helvetica, Arial; also, can someone please explain this selector? #menu a:link.active, #menu a:visited.active { background : #fff; border-bottom : 1px solid #fff; color : #000; }

Adam Kalsey
July 10, 2003 12:46 PM

You can safely leave that out of the menu. It's cruft from the application this is copied from.

Marco Venier
July 15, 2003 12:01 PM

It looks nice, however, as soon as I change the browser text size it no longer works as intended on Mozilla and Firebird (latest versions). Surprisingly (for once) it does work on Win IE 6.x... The problem on Mozilla is that the tabs fall below the border (on increasing text size) or the tab borders double up above the border (on decreasing the text size). Have you tested it on Mozilla, or is this only a problem for my browsers? Is there a way to make it work at various text sizes?

Nico
August 19, 2003 8:05 AM

@Marco: Just alter the line heights (try and error) and if this doesn't help the "padding-bottom" in "#menu" @all: I tried to get this working in an centered div with auto-margins, which was a bit tricky 'cause the absolute positioning of the submenues made themselves move around, when the browser window size is changing. Found a way at least: When you drop out the left-value in "body#index #menu ul#subnav-1, ..." the submenues go on the outer right of the auto-amrgined div. Then just add a negative margin-left value in pixel and you can place the submenue exactely where they are needed and they are sticky now. That's not really relative positioning, but nearly :) body#index #menu ul#subnav-1, body#archives #menu ul#subnav-2, body#links #menu ul#subnav-3, body#facts #menu ul#subnav-4 { display : inline; left : 20px; /* kill this line */ position : absolute; top : 35px; margin-left: -550px; /* for instance */ } Works good in IE / Mozilla, but the margin-left should be hidden from Opera 7.

Nico
August 19, 2003 9:11 AM

Umm, I've put up a test-page here: http://www.couchblog.de/testing/kalseystabs/index.html

Russ Baldwin
September 9, 2003 11:06 PM

We have tried to create a different way of using this tab stuff in a compact vertical list. Doesn't look very tab like at present but that shouldn't be that difficult to add over sized images to the backgrounds and rotate then for fast roll overs. The good thing about this design is no fixed fonts and so it very is fluid - Go on give it a go. Web site for test: http://homepage.ntlworld.com/russell.baldwin/csstest/menu1.html It has been tested by us and appears to work on the following; + Windows XP + Mozilla (1.3 and Firebird 0.6) + Netscape 7.0, + Opera 7.01 + Internet Explorer (6) In addition, we ran it through BrowserCam and it appears to look OK on all the Mozilla browsers, on all their supported platforms, as do the pages in Netscape 6.2 and 7.01. Also Safari (1.0 Mac) and Konqueror (3.05 Linux) appeared to be OK. Explorer (4.0 PC) and Netscape 4.2 displayed plain text as expected. Bad thing is it works on everything I can try EXCEPT for: +IE 5.0 + 5.5 on PC, +IE 5.2 on Mac +Opera 6.05 Mac and PC. +IE Pocket PC Mobile 2003* (*2002 - should display plain text, but the new one has CSS support.) We could really use some help in fixing this. Any ideas to Email: russ@shoesforindustry.net Web site for test: http://homepage.ntlworld.com/russell.baldwin/csstest/menu1.html The web includes CSS and BrowserCam shots of problems browsers. Enjoy, Russ

John Sisk
September 13, 2003 8:21 PM

Great stuff. I've used your tabs in a demo template at http://www.citydesktemplates.com/Templates/CSSTabs.html

Russ
September 20, 2003 9:09 AM

Attempt number 2 for Pure CSS nested list menus with sub nav - vertical, compact, scalable. After spending serious (read silly) amounts of man hours on this, we have come up with the following (updated from previous email): http://homepage.ntlworld.com/russell.baldwin/csstest/menu1.html It now appear to work on IE 5.0 and 5.5 on PC and IE on the Mac (after a fashion - menu spacing a bit off on IE 5.0 and no float right on IE Mac - all based on BrowserCam.) Opera 6 still proves to be illusive. It appears OK to all the other browser we can test in (IE6 /Opera 7.1/Mozilla 1.1+/Firebird 0.6/Netscape 7.0+) and also from looking at BrowserCam (Safari/Konquerer etc.) There is much more info on the web site. If you can test these pages out on your browser then please let us know. (Testing is better than BrowserCam and we are especially interested in IE on the Mac and IE 5/5.5 on PC, IE on PPC 2003.) Any suggestions for any fixes or browser checks - please us know. Me, I'm off to get a shower, a shave and some food which isn't pizza, some drink which isn't caffeine based...and then to bed. Thanks, Russ

john
October 10, 2003 9:57 AM

I'm trying to use white-space=nowrap; to stop the tabs from flowing down the page as the user resizes the browser but it isn't working for some reason and I can't see why. Could someone see if they can make that work?

Chad Coffman
October 21, 2003 2:11 PM

As mentioned before, I have implemented these tabs, with very minor modifications, on the following site: http://www.colorado.edu/eeb/ The only current problem is that if you go to any page that has submenus, in Explorer 5 and higher, and hit refresh eventually you will see the submenus 'shadow' or hover over the main tabs. The issue seems to be the main tabs don't predictably draw every time. It's totally random (or at least apparently random) and only happens in IE. I really can't figure this one out.

Chad Coffman
October 24, 2003 9:27 AM

Of course, although I have been thinking about and playing with this for months, as soon as I post something publicly, I find the answer on my own. I simply added a fixed width to my CSS element which positioned my two (I admit crude) images to the right, at the top of the screen. Original: #right { position:relative; float: right; height:105px; width:auto; z-index:1; } New: #picMenuRight { position:relative; float:right; width:230px; height:105px; } I still use the #right element for other pages and it works great - in the right context.

Walter Werner
November 3, 2003 11:00 AM

Great work! Looks nice, easy to implement, creates a lot of room on your page. However, I've been wrestling with a problem I simply can't resolve: in IE5 (Windows), the sub menu seems to have some invisible width limit. When I have three or more items in the sub menu, the browser simply inserts a break, lining up the menu in two or even more lines. It can actually be seen on Chad Coffman's page using IE5. Funny thing, though: when you click on one of the sub menu links and hold the mouse button (as if you want to drag & drop it somewhere), the menu aligns itself correctly. Browser bug? Or do I have any chance of fixing this in IE5 as well? /Walter

Cara
November 14, 2003 12:17 PM

Great tab style menu...I am an absolute beginner in CSS and PHP but I'd really like to implement this solution..I need help in the following areas and i really appreciate your help in advance: 1. May someone share his/her PHP code for my reference? 2. When implementing links for submenu, is it the same as defining body class attribute? Thanks a lot

Adam Kalsey
November 14, 2003 12:30 PM

The PHP has nothing to do with the menus. The only reason the files use PHP is so I didn't have to make a copy of the page for every tab.

Cara
November 14, 2003 12:30 PM

One more question, the tab menu when printed shows as a list..does anyone know how to print it as it shows in a browser?

Cara
November 14, 2003 1:11 PM

Hi Adam, thanks for the quick response... If I understand you correctly, i do not need to use PHP if my page content is different for each tab?

Jon
November 17, 2003 5:49 AM

Great idea! I used three nested lists with CSS no script, and they look appropriate even with CSS disabled...

Beginner
November 27, 2003 11:09 AM

When you shrink the screen, the menus and submenus are wrapped so that they can all be displayed..I would prefer that they don't wrap and require that the users view the website at full screen for 600X800...does anyone know how to do this? Thanks a lot!

Shawn Roser
December 9, 2003 7:08 AM

Hi Adam, Great work on the tabs. I love the implementation! I've taken your idea and expanding on it a bit and ran into a couple of problems. Here's the scoop: What makes my tabbed navigation different than your implementation, is that I want the tab to switch when I click on it, not take me to a new page and change it once I'm there. I'm want to recreate the tabs on my company's main site (http://www.optionsxpress.com/). I've been able to recreate the tabs, but when I view them on the mac, they don't render correctly. Mac Safari, Netscape 7.01: The last tab sticks out about 5px or so. IE 5.2 is the worst. When I click on the various tabs, they wrap underneath the subnav bar. I don't know what causes this. IE 5.01 and 5.5/Win: When other tabs are clicked, the subnav links disappear. I think this has to do with the container div having a width on it. I want the nav to stay when the window is sized and using a width keeps them in place but it makes the links disappear. If I remove the width the links appear, but wrap underneath the subnav bar. You can view my test page here and the css is included in the document: http://www.optionsxpress.com/headers2.htm I appreciate any advice you can offer and I thank you in advance for your time. Shawn

lionel
July 30, 2004 3:19 AM

i have a problem when i use this menu on my web site http://www.ixila.com ...the active page is not white in the menu. i don't understand why... could someone please help me

Denis Dubreuil
August 12, 2004 11:18 AM

Great CSS implementation!

Denis Dubreuil
August 12, 2004 11:24 AM

Lionel Your code does not specify that the top-level LI tags should have an ID="nav-1"(to nav-x). So the CSS does not know that the active tag should be white...as in: body.section-1 #menu li#nav-1 a, body.section-2 #menu li#nav-2 a, ... { background: White; border-bottom: 1px solid White; color: Gray; } Bonne Chance!

paul
August 23, 2004 6:37 AM

Great stuff, trying to combine with the simplebits css to get a simple and neat menu structure. I'm stuck with the a:hover on the subnav items (http://www.onderwegnaarbassa.com/logbook.html) where the month names should light up when selected. Page validates on html and css - no luck. Can someone push me in the proper direction ?

Jim Maguire
September 16, 2004 3:31 PM

Very impressive, just what I was looking for! Going to use it in my next website!

glasson
October 4, 2004 12:44 AM

Thank you for those css

Tony Caravana Campos
October 22, 2004 9:18 AM

would like if i could change the tab without refresh the page. It's possible in this case, using div?

dna testing
December 14, 2004 7:22 AM

Can your code be used on commercial sites? Should we have a comment in the code sourcing this page or you?

Kari Lehti
January 21, 2005 12:38 AM

This was the best-looking and easiest-to-implement tab system I found. Thank you for making it free to use. The child product of your labours can ultimately be found at http://aasia.utu.fi - for now with the added 'new'.

Mark
February 13, 2005 4:53 PM

Sorry, but how do you find the code? I didn't see a link...

John Easy
February 24, 2005 2:11 AM

Many thanks for a great css menu implementation. I have used it on my personal website at www.bigease.net and will probably go ahead and use it on my other sites as well. Once again thank.

Noel
March 13, 2005 4:21 AM

A very nice implementation! However, there is one problem. If the number of tabs is large and the browser window too small to accommodate them, the tabs that do not fit are wrapped onto a new line, which looks a bit ugly. I'll have a go at solving that one.

JBM
March 16, 2005 5:35 PM

Adam, are you still responding to these posts? I just found, and am testing this CSS menu, am not real fluent with CSS and having the worst time, so far with IE 5.2 on Mac OS X... the sub-menu links don't render. IE 6 on PC has problems with the right border of the framed content area (doesn't display), and a few other wrapping issues that I've managed to work around. Has anyone found any more fixes/hacks to aid in cross-browser compatibility? My test pages are at: http://www.dancinwoofs.com/Daycare/index2-1.asp

Autoversicherung
March 17, 2005 1:25 AM

Thanks, exactly what I was looking for, and its even xhtml :)

AG
March 24, 2005 3:32 PM

noel, you write you have a solution to prevent the wrapping of the tabs if the browser window is too small. Could you post it here?

Vitaly Friedman
March 27, 2005 10:03 AM

Thanks for great tabs - may I add a link to your page in my "bookmarks for webdesigners" list (http://www.alvit.de/vf/en/00_webtools.html)? Thanks, anyway. With best regards from Germany, Vitaly

Gaeldr
May 23, 2005 6:21 AM

That's a really nice tabbed menu implementation :-) I only regret that this implementation was designed in ABSOLUTE position ... relative positions (to put the menu+submenu into a page-centered header div, for example) would have been more flexible and powerful ... I'll try working on it ... But really nice implementation, though ! Congratulations :)

Gaeldr
May 23, 2005 6:23 AM

That's a really nice tabbed menu implementation :-) I only regret that this implementation was designed in ABSOLUTE position ... Relative positions (to put the menu+submenu into a page-centered header div, for example) would have been more flexible and powerful ... Not to mess with the top attribute that can higly very between websites ... I'll try working on it ... But really nice implementation, though ! Congratulations !

Derentis
May 23, 2005 7:45 AM

Really impressive ! Only one "regret" : the submenu is absolute-positioned, it would have been better if relative-positionned, in order to always have the submenu just below the main menu, wherever this one is located :) I'll work on it as an improvement ! Congratulations ! :-)

Mike
May 24, 2005 8:19 AM

Can vertical be done in that manner too?

RJ
May 29, 2005 5:48 PM

I've adapted this for my site: http://thejaffes.org/ . Take a look if you care to.

John
June 6, 2005 7:17 PM

Your CSS with Tabs looks exactly like what I am looking for. How can I get download a copy of it as you offer.

Robin Bankhead
July 1, 2005 7:53 AM

Adam, An excellent resource! I've used the top-level menu on http://www.amychan.co.uk/ with some tweaks. I notice the font-scaling issue was already covered, just to add my 2 Euro-cents: I replaced some of the critical values with ems to try and make the tabs scale better with the font size. It's not seamless but I'll keep playing around and see if I can perfect this approach. Also, on the homepage of the site, you'll see I had to hack-in a spare container DIV inside 'contents' for the purposes of having it clear a right-floated image. Without it, the 'clearer' DIV I use to achieve the stretch breaks the right border in IE. (I'm hoping to find a way to eliminate this too.) Cheers, Robin B

jade1977
July 3, 2005 3:04 PM

I love the tabs. Better than some of the others I have seen so far. currently I am attempting to put a sub-sub menu in, and allow both the sub and the sub sub menu to mark the active link. I got the sub-sub menu in, but I cannot get it to mark the active tab. (I hope that I am making since to anyone but myself!) Has anyone does this? Thanks

Mads
July 19, 2005 6:09 AM

Relative positioning - has anybdody made this work with relative positioning?

Reign
July 22, 2005 5:03 PM

Has anyone worked on having a sub-menu to the sub-menu. Kinda weird request. The thing is I am working on this web site for an internship and I've tried playing with dhtml and well got frustrated and I am now trying to work on implementing this navigation on it. I am beginning to hate javascript. lol I love the idea of the tabs.

Peter V.
July 26, 2005 11:43 PM

Hello I am new to CSS and love the look of your tabbed menu. Would you (or anyone) please let me know where to get this code and how to enter it in? Kind regards, Peter V.

Derentis
August 8, 2005 2:30 AM

Hmm quite nice, not bad ! When talking about REAL tabbed CSS-Menus, instead of using only border and background variations, I rather prefer to use the "sliding doors" pure-CSS method : http://www.alistapart.com/authors/douglasbowman/ Really much more flexible, beautiful and powerful than the "border variation" technique ...

diana
September 21, 2005 10:04 AM

This is an elegant tab menu. But I can't seem to get the submenu to display. Adam, would you please provide the code for us instead of having to copying from the code view. Thanks,

Guillermo
October 7, 2005 3:01 PM

This is a really nice tab menu. But I cant get the submenu to display. Adam, would you please provide the code for me instead of having to copying from the code view. Thanks,

Alae
October 8, 2005 6:32 PM

hi nice tabs but got a problem when using it...i am new to css dont laugh :p ..... i have placed the tabs within a (dont think this the problem but i might be wrong) but when using firefox i get a large gap between the tabs and the content however in IE this doesnt happen ...... HELP!!! many thanks

Fluke
November 21, 2005 6:46 PM

I said I like it, I want it, Ill take it off your hands and..........sorry about that. Really like the tabs, have been looking around for ages for a non javascript vertical multi-flyout menu system for IE and given up, but now thinking along the lines of this tab system after seeing it in action. Thanks.

Elke
January 31, 2006 7:12 AM

I really like this nav system and used it for a project at work. I made some tweaks to it though so that the user could tell what sub-nav menu item they were on as well. It keeps the parent tab highlighted, and then shows the child. body.nav-1 .menu li#nav-1 a, body.sv .menu li#nav-2 a, body.nav-3 .menu li#nav-3 a, body.aa .menu li#nav-4 a, body.tc .menu li#nav-5 a, body.lt .menu li#nav-6 a, body.me .menu li#nav-7 a, /* sub menu items */ body.nav-8 .menu li#nav-8 a, body.nav-9 .menu li#nav-9 a, body.nav-10 .menu li#nav-10 a, body.nav-11 .menu li#nav-11 a { background : #E8EBF0; border-bottom : 1px solid #fff; color : #000; } /*sub menu parent*/ .menu #tc { display : none; width: 90%; } /*sub menu parent*/ body.tc .menu ul#tc { display : inline; left : 10px; position : absolute; top : 95px; } /*sub menu parent*/ body.tc .menu ul#tc a { background : #fff; border : none; border-left : 1px solid #ccc; color : #999; font-size : smaller; font-weight : bold; line-height : 10px; margin-right : 4px; padding : 2px 10px 2px 10px; text-decoration : none; } class=" " class="" onload="init(); adm_init();">

charlie
March 8, 2006 12:28 PM

I love this! I would like to see it so the sub-menu choices only appear when hovered though. How do I do this? Thanks Charlie

Mudpie
March 31, 2006 7:46 AM

Thanks man, This is really handy

trimble
April 4, 2006 10:16 AM

Being a CSS newbie, I'm still trying to figure out how this magic works! How does the passed url translate into a different body class? Although the demo seems to be a single page, its tabs can be referenced with distinct urls. I've also looked at other sites listed here where the content changes from tab to tab. Amazingly cool stuff, but I could really use some help in understanding it before I'll be able to implement it. Thanks!

Alan
April 17, 2006 11:07 PM

Trimble: in case you haven't figured it out, it actually is different pages but only the id on the body tag is different.

chaitanya
May 2, 2006 2:22 AM

hi, i've been working on a project for which i was testing whether tabs (in a form for html)work for various browsers.it works fine for IE but for netscape(6.1 &6.2)the use of the tab key doesn't seem to work.is there any wokaround or any authenticated document supporting this?any pointers are appreciated.

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

Angela
August 14, 2009 12:01 PM

The subnav items are floating above the page in the banner area, what have i done wrong? is it because i added floating pictures?

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

shaikh farhan
March 1, 2010 2:43 AM

Hi for where to get the code for this thanks

shaikh farhan
March 1, 2010 2:43 AM

Hi form where to get the code for this thanks

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

Best Of

  • How not to apply for a job Applying for a job isn't that hard, but it does take some minimal effort and common sense.
  • 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.
  • The best of 2006 I wrote a lot of drivel in 2006. Here's the things that are less crappy than the rest.
  • Rounded corners in CSS There lots of ways to create rounded corners with CSS, but they always require lots of complex HTML and CSS. This is simpler.
  • Debunking predictions Read/Write Web's authors have some goofy predictions.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

Recently

Physical camera shutter for Cisco Spark Board (Jul 6)
A 3d printable design for a camera shutter for a Cisco Spark Board
My Travel Coffee Setup (Jan 20)
What my travel coffee brewing setup looks like, and how you can build your own for under $100.
Turkey Legs (May 30)
Product naming gone awry.
Speaking for Geeks: Your Slides (Dec 17)
Tips and tricks for creating great slides.
Speaking for Geeks: Writing Your Talk (Dec 14)
Don’t wait until the night before the talk to write it. Crazy, I know.
Speaking for Geeks: Tell a Story (Dec 13)
Telling a story keeps your presentation focused, keeps your audience interested, and makes it easier for you to remember your talk.
Speaking for Geeks: Where to speak (Dec 11)
You've got a great idea for a talk. How do you find conferences to submit it to?
Speaking for Geeks: Getting your session accepted (Dec 10)
Your conference speaking submissions are not getting accepted because they're bad. Here's how to make them better.

Subscribe to this site's feed.

Elsewhere

Tropo
Voice and communications platforms, including Tropo and Phono. Work.
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-2017 Adam Kalsey.
Content management by Movable Type.