DHTML Drop-Menu System (DOM, Javascript & CSS1)

You likely arrived at this page via linking from the DHTML Menu-System Module navigational device—the horizontal bar located just under this page's header region. The toolbar a cool way to give users quick-access to links they need to get exactly where they want to go within a the website.

Screen-shot of the Web application menubarThe code that creates and drives this module was originally created back in the days of the version 4 browsers, when Web standards were basically ignored by browser manufacturers. In the years since, I've tweaked the code to be functional in newer —more standardized—browser releases.

With some minor changes to the extant codebase, the exact-same horizontal toolbar javascript can also be used to create a vertical, slide-out toolbar.

Feel free to check-out my menubar's javascript code. Make any needed changes to the data and script files only, and then simply place a reference to each of these resources within the <head> section of your webpages.


FTI: both of the menu system module is fully compatible with standards-based, DOM-compliant Internet Explorer and Mozilla browser flavors. The module works great on Internet Explorer versions 6 through 8, as well as Firefox versions 1.5 through 3.

Recently, Microsoft has released an ASP.NET control which does much the same thing as my menu system. So this most recent tweak—Semantic XHTML menus—might be my final tweak for this module.