DHTML/CSS

September 29, 2004 6:44 AM

DHTML/CSS Wizards: I am looking for free source code to create a simple two-tiered menu. When you hover above a link in a horizontal list of links, each link will display the sublinks in another horizontal bar underneath the first list of links. An example can be seen at macromedia.com. Although I could do this easily enough in Flash, I'm hoping there is some code already out there somewhere in DHTML/CSS/XHTML.
posted by banished to Computers & Internet (16 answers total)

If you have a Windows system, try Xara Menu Maker. It's $25, but you might be able to get your work done with the trial download.
posted by grumblebee at 6:50 AM on September 29, 2004

Response by poster: None of their examples on their website show what I'm looking for, any other ideas?
posted by banished at 7:10 AM on September 29, 2004

It's easy and free with nested unordered lists and CSS. Theory, web tool, Dreamweaver plug-in.
posted by mimi at 7:31 AM on September 29, 2004

PS: Lots more.
posted by mimi at 7:33 AM on September 29, 2004

Response by poster: I've seen listamatic before... but everything they have isn't close to what I'm looking for. I don't need a drop down menu or a simple horizontal menu, I need a two-tier menu system.

Say I have 2 links... Main and About Us. I need it so when you hover over "Main" you have access to 5 new links presented horizontally, and then when you hover over "About Us" you get 5 different links presented horizontally.
posted by banished at 7:44 AM on September 29, 2004

Response by poster: Here, scroll down to Nested Horizontal Lists. I guess they do have what I'm looking for, but those examples aren't working in my IE 6 for some reason.
posted by banished at 7:48 AM on September 29, 2004

Response by poster: The Blues Clues and Horizontal in Horizontal are the closest to what I'm looking for, but I want the nested links to change when you *hover* above each of the main links.
posted by banished at 7:54 AM on September 29, 2004

IE will always be your nightmare. I've got what you're looking for here but I couldn't make it work for IE. This was a year and a half ago, though, so there's probably a better way now. You might be better searching this out on CSS-D.
posted by mimi at 8:05 AM on September 29, 2004

I've seen the effect at Audi World, but this relies on javascript. It can't be done in straight HTML+CSS because of the problems IE has, as Mimi mentioned.
posted by adamrice at 8:57 AM on September 29, 2004

I used this for a while. It's very customizable. Set up wasn't too bad if you know anything about javascript.
posted by jpoulos at 9:10 AM on September 29, 2004

The problem, really, is in your requirement of :hover. If you use CSS to do this (and there are many arguments for that), you need to put that on the <li>, and that's exactly what IE doesn't play nice with. If you let go of that requirement and make the menu fixed on a click, you can do some pretty amazing stuff with the CSS listies (while still having a lot of tap dancing to do for IE). If you absolutely need the hover and absolutely need it to work in IE, listen to the Javascript wizards in the house..
posted by mimi at 9:21 AM on September 29, 2004

Do you mean like the menu on this site? If so, you're going to need to use Javascript - can't be done in CSS only and make IE happy.
posted by normy at 9:47 AM on September 29, 2004

Banished ... I've got one that I use on an application I'm developing. Email me at katzke AT_NOSPAM gmail.com and I'll send you a login so that you can see it in real life. I also have the PHP code that populates it, if you'd like.
posted by SpecialK at 10:40 AM on September 29, 2004

Response by poster: Javascript is fine, if anyone knows of a javascript script that will accomplish this feat, please let me know.
posted by banished at 11:38 AM on September 29, 2004

Banished, I have one... email me and I'll give it to you. It's javascript that is written to by PHP, but you can use the javascript without the PHP. I would've already emailed you if you had any real contact info in your profile. :-P
posted by SpecialK at 2:04 PM on September 29, 2004

Actually, I just remembered... I created my script by hacking this one:

http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm

See if that works for you. (It's the one in the middle of the page where it says demo, not the tabs at the top.)
posted by SpecialK at 2:14 PM on September 29, 2004