About one year ago, I published two posts dealing with creation of tabs out of unordered lists. Nested tabs or two-level navigation was about one line of tabs + subtabs for each, with active (selected) item. Variable tabs were one-line navigation, were some items have different design.
Back then, I knew that none of them was perfect, but it suited my needs and I left them be. One year is the long time though, especially in the fast-blossoming field of CSS design. New tricks were discovered since then and it was time to update that code. I had some time to do it now.
Both tabs examples are improved and works almost perfect. Unneeded markup (like clearing div) is removed in both cases.
Two-level navigation
Main issue here was there was not the definitive solution. Using display:inline for the items does not give enough design options. Using display:block;float:left works fine in everything but IE. IE has one nasty bug, where it miscalculates what is width:100% (try it, using IE).
Second example was the good way forward. Now, since this is not a bug we can workaround with some CSS hack, I used expression property to fetch the width of the main menu. I can’t figure out why I did not remember this before.
Take a look at the improved code, which works perfectly in IE5+ (win), Firefox, Safari, Omniweb and Opera 7. In IE5/Mac, second level items refuse to behave. If you know why, please tell. I’m out of time.
For the li:hover simulation, I used ADxMenu standard, which voids the need for duplicated styles.
Variable tabs
These tabs had most issues with IE5/Mac, where huge gap was there, right below the items. While working on the fix, I realized that there are two ways to achieve the same design, so you can take a look at example 1 and example 2. Differences are minimal, you can use whatever suits you best.
This works perfectly in everything. IE5+ (both win and mac), Opera 7, Firefox, Safari etc. The trickiest part is to figure out the correct values for top and bottom padding of the slanted tabs. The rest is easy.
Alex,
thanks for the article. I still haven’t figured out how you got IE to not stretch the top-level
lis to 100% width. Could you give me some insight on that. It looks like they arefloat:left, but you don’t use anexpressionon these, but only on the second-level list items. I’m currently creating a new design where I have to use IE7 for some reasons, and I usually did something likebut as soon as IE7 is loaded, it will evaluate the descendant selector statement and the
lis will be at 100% width again.Can you help me out there? I looked at your code, but couldn’t find the solution.
Ugh. Stupid me. I didn’t even have this problem. Ever. It was the
atags inside thelitags that just needed afloat:leftto work fine. And I did it like that several times before. Dunno why it slipped off my mind right now, I must really have gotten out of bed way too early this morning.Anyway, Happy New Year!
Thanks in advance for you help, I really like this menu.
I am trying to setup your 2 level menu. It works in Opera and Firefox, but I cannot get it to work in IE.
Here is the url:
http://previewmysite.com/linford.net/2tabs/index.htm
I put all of the files below in the 2tabs/ directory:
index.htm
ADxMenu.htc
ie(1).css
ie.css
s.css
style.css
http://www.aplus.co.yu/css/tabs-revisited/css/tabs2/
-> 404 :(
Also, the menu works fine in IE6/XPsp2 when loaded on my local machine. However, when the files are loaded up to my host, it does not work.
I have AddType text/x-component .htc setup correctly.
I finally pulled my head out and figured things out. I was doing some rewrites in htaccess and needed to put .htc files on the list of exeptions.
Beate, thanks, link is corrected.
Austin, you do not need all those .css styles, only .htc and the style embedded in the page. The other stuff is for my site design. I’m glad you got it working — I wouldn’t know to help you on that particular problem.
Can you make the last element of a horizontal sub-menus into a dropdown list of choices? Essentially like the Netymology * — with horizontal submenus style, except the third level menu is a dropdown vertical list.
The last element of the list submenu could be “more …”.
The purpose is to keep long sub-menu at a fixed width.
Brian, it sounds CSS-fun and IE-nerve-wracking. :) The potential is there, but I never had the need for something like that. Feel free to re-use the code and try to build it on your own.
Yes, I have a Mozilla version working, but not IE.
is there a way to add a 1 sec delay to the .htc and/or some fade-in?
rnunez…I’m not sure where you need this delay?
is just a UI issue, usually people will go down and to the side simultaneiously (instead of down and then to the side), causing the menu to jump to the next menu item, if the menu had a delay of at least one sec to be deselected after the mouse moves away the selected item problem would be solve.
Heh…one of the most requested features in ADxMenu. I have no plans to implement this, as I keep this to CSS-only solution (.htc is a necessary evil).
Separate script would be the best solution for this, as it will keep the HTML markup clean — the one thing I consider the most important. If you don’t mind few extra divs, take a look at PiE dropdowns — great idea and good implementation there.
Hi there. Nice work, but do you pay attention to your links? It seeems that half of them are broken especially on this page.
Looks good. But unfortunaltely I noticed that the onmouseover submenu is only shown for the links AFTER the ‘selected’ section. There must be a way to show those in front, too. Can anyone suggest a solution?
Mac