Javascript DHTML hierarchical menus: Some options

Posted on March 08, 2002

in Site Development

by Shashank Tripathi (shanx24)

Rated 4.14 (Ratings: 13) (Add your rating)

Want more?

More articles in Site Development
More articles by shanx24

Shashank Tripathi

Member info | Full bio

User since: March 09, 2001

Last login: March 09, 2001

Articles written: 1

Now that the Webreference Hierarchical menus have gone commercial, it is time for some of us to consider good alternatives for developing those DHTML drop-down menus.

In this quick posting (hesitate to dignify this as an "article"), I will share some options from my stash, with some relevant preliminary comments. This is not supposed to be TheGreatComparisonOfMenuScripts or a comprehensive rehash of search results from Google... it is just a listing of possible options that I have accumulated on my local drive. Hope this is useful.

Before we begin, I have tested these menu scripts with the following browsers using a Windows XP build 2600 and a Windows 2000 box —

IE 4x - 6x
Netscape 4.77
Netscape 6.2
Mozilla 0.9.8 (Mozilla/5.0; Gecko/20020204)
Opera 6.01 Build 1014

Ok, here's the list:

Name	Sample	Browsers it works with	Remarks
Milonic	Get code	All tested.	This one is perhaps the simplest to start coding with, appears the same in all browsers, and has a cool fading effect. Should be seen.
Dynamic Drive	Get code	Claims to work with all, but does not even show up in Opera.	I discarded this particular one because it does not work in Opera 6. They have a whole category of menus though.
Bratta.com (DHTML Central)	Get code	All tested.	He has a bunch of examples out too. May I draw your attention to a menu with a valid XHTML DTD. (His advanced examples are a little quirky with NN4 and Opera though).
BrainJar.com	Get code	Acts unstably in Opera and goes absolutely kaput in NN 4.77.	Greatly done script (and DOM viewer, which you must see if you are a JS coder) but I would like to have had Netscape 4.77 support. If you don't care about old Netscapes, this is one of the best there is.
ProjectSeven (Tutorial to make menus with their Macromedia Dreamweaver Extensions)	Get code	All tested.	They offer some cool extensions to Dreamweaver. Note, however, that you can use this only if you use DW, and you have Macromedia Extensions Manager installed.
WebFX "XMenu"	Get code	Doesn't work in Netscape. Any Netscape. The website is honest enough to claim so.	Hmm.
Flash	Get code	All tested.	Er...and the problem is? ;-)

That's it. Would love to hear other options, and how these above suggestions fare on Mac and Unix machines.

-Shashank
(shanx@shanx.com)

Shanx is currently absconding in Tokyo. He is known to drag his feet to his corporate cubicle in Gin za every morning where he pretends being busy drawing boxes and arrows that connect to other boxes and arrows, and talking in acronyms to strangers with suits, real cool cellphones and egregiously quaint accents.

26 comments on this article. Log in to add your comment | Rate this article:

Fireworks pop-up menu

Submitted by shanx24 on March 9, 2002 - 17:33.

Mary Beckman [@] suggested taking a look at Macromedia Fireworks Pop-up menu code. I just tried it and it is pretty simple to implement from within FW 4 -- you "Insert" a "Pop-up menu" on an "Export slice". However, it seems to be a little bit elementary and needs a fair amount of hacking before it works as well as the other alternatives.

Name	Sample	Browsers it works with	Remarks
Macromedia Fireworks Pop-up Menu	Get Code	All except for Opera. On Netscapes and Mozilla, the links in the menu do not turn into a hand-cursor (but this should be easily sorted, perhaps).	Pretty nifty for folks familiar with FW 4 and not with JS for some quick functionality. Their commented JS file includes some comments on how to modify the script.

JS Menus 2 CSS?

Submitted by haidary on March 9, 2002 - 18:01.

Hey guys. I'm just wondering what some of the advantages are to using these JS menus as compared to CSS ones.

CSS is another option..

Submitted by shanx24 on March 9, 2002 - 19:19.

Great idea! A pretty good example is here. I am already using this for a project right now where users can settle on a browser (IE 6 or above, in our case). The second level of the menu seemed a little difficult to control in terms of location (x, y and width) but the menu resizes itself very gracefully.

Another great TreeMenu

Submitted by LaOs on March 10, 2002 - 03:16.

Have a look at ypXmlTree at youngpup.net. I think it is a great free script with many options and features. ypXmlTree "In General... ypXmlTree is a general-purpose expandable/collapsable tree in the style of Microsoft Windows Explorer, Apple Macintosh Finder, or the navigations of many popular websites. It is highly customizable, feature rich, and degrades gracefully in older browsers or when javascript/css is unavailable."

another option

Submitted by Junglee on March 11, 2002 - 03:01.

cool ! i was looking for just this kind of comparison I also recall a pretty decent cross browser menu script at http://www.dansteinman.com...

And another...

Submitted by gnarly on March 11, 2002 - 04:31.

Have you checked out the ones at cross-browser.com? I didnt know so many menu options even existed... :-)

thanks but which menu?

Submitted by shanx24 on March 11, 2002 - 05:01.

gnarly, thanks for the link. I think i have seen that website before, but did not find any demo of a menu. I know they do have a library (CBE?) but would appreciate if you could point to a menu link? Cheers!

Heirmenus

Submitted by endquote on March 11, 2002 - 13:44.

I'm surprised you didn't mention HeirMenus, as I think that's the most commonly-used script for menus out there. It's decent, but it really starts to choke if you have lots of menu items, as it regenerates them on the client-side for each page load. This is the problem with any of the menu scripts, really. The ideal script would be some combination of server-side and client-side code to make it happen. This is why I tend to go with a roll-my-own implementation.

HeirMenus

Submitted by mw_63 on March 11, 2002 - 16:02.

One thing that might help all users is to note that in Netscape ... if you place an inline Style ...example all layer attributes called from javascript will bust. And seemingly for no reason you will be asking yourself why isn't this working the code is correct! ... remove the inline style and all will be fine again

Hier Menus - footnote

Submitted by mw_63 on March 11, 2002 - 16:04.

Sorry ... >Bstyle="color: red"< was the example but the 'xmp' tag didn't pass the formating

some responses

Submitted by shanx24 on March 11, 2002 - 16:38.

endquote:
Heirmenus? The whole article starts with that statement! "Now that the Webreference Heirarchical menus have gone commercial....". In case you did not notice, this posting suggests alternatives to that very script.

LaOS:
ypXmlTree does not seem to a dropdown menu at all. It is some sort of a tree navigation? Which is not what this discussion is about. Thanks for sharing though.

Junglee
Thanks for sharing the DynApi link, but it seems to work only with Netscape and IE (as their website honestly claims). For instance, this craps out totally in Opera.

Apologies

Submitted by endquote on March 12, 2002 - 15:49.

Oops. I sort of just looked at the chart there. Sounds like a good time for me to publish my own version. =p

can't last long

Submitted by unobserved on March 20, 2002 - 10:22.

Did anyone actually take a look at the pricing options for Hiermenus?

$29.95 USD for personal sites of 5 pages or less?! Are they mental?! What exactly would be the purpose of having a hierarchical drop down menu that allows you to nest pages deeper than one level if your entire site is 5 pages or less? And for a personal site no less. I'd be surprised if anyone pays that fee. And the fact that you have to contact a customer service rep for quotes on and commercial sites or personal sites larger than 5 pages. They're not going to find ANYONE with enough technical expertise to install their script that is willing to cough up that kind of money.

These guys had better gets their heads out of the sand. I understand where they're coming from with the ammount of work that they have put into the project (it's a great piece of software), but with those pricing options they don't stand a chance.

Newer DynAPI

Submitted by tadhg on March 20, 2002 - 13:44.

Work on DynAPI was moved to dynapi.sourceforge.net, and I think they're working on supporting more browsers. The main problem that I can see with the DynAPI alternative is that they don't have a simple "works out of the box" menu solution. On the other hand, feedback might push them into providing one. Also, the whole thing is GPLed so there's no worry that it'll suddenly develop draconian licensing/pricing issues. Given how useful hierarchical menus are, it imght be worth it as a community to support this project and help to make it a standard solution (as HierMenus was becoming before the license insanity).

bratta compatibility

Submitted by notabene on March 24, 2002 - 14:10.

I've had trouble with Thomas Brattli's dhtml menus when checked on an iMac with IE4.something (a few months ago), where the menus didn't position correctly.

I signaled it to him and never received an answer. Can't tell you if he's corrected it, though. I stopped using his scripts.

cross-browser.com menu examples

Submitted by MikeFoster on April 15, 2002 - 15:25.

Thanks for mentioning my work at cross-browser.com

The menus are just examples of how to use the library - but they are decent menus and very cross-browser - and many people are using them.

From the home page click the "Examples" link on the horizontal menubar. There's a named link at the top or just scroll down to the menu examples section.

If you have any questions don't hesitate to ask.

Thanks

!!!

Submitted by MikeFoster on April 26, 2002 - 21:32.

I just noticed something mentioned in this article...

"Windows XP build 2600"

...there's something very ominous about that

HierMenus

Submitted by matic on May 6, 2002 - 13:59.

For those of you who think that Hiermenus personal site pricing is outrageous (USD$29.95 for maximum 5 pages, non-profit), check out their flat fee rates for commercial websites:

1. Websites containing =1000pages USD$2495.00.

Now this is insane, considering you can get a similar script that's just as good, if not better than theirs for free. I wonder what they did to existing sites that were using their script before they went commercial (like redhat.com and palm.com, who have a lot of pages!). Did they just slap down an invoice on each site for USD$2500.00?! Brutal.

Cascading Dropdown Menu

Submitted by MikeFoster on September 5, 2002 - 01:36.

I've written a new menu. If you have time to give it a test-drive I'd appreciate any comments.

Thanks

Start of page header

Other Fine Evolt.org Sites

Navigation Starts

Submit

Article Categories

Highest rated articles

Recent comments

Main Page Content