Table of topic groups > Front page of CSS-guide > Extra pages > I How to design dynamic menus (introsection)

Previous page

Sections of page:

Next section

Last section

I How to design dynamic menus

Common

This page gives hints to create multilevel dynamic menus. In the presentation section is also advice, which can be applied also for static menus.

How to design dynamic menus worked at the beginning only certain versions of Netscape and MS IE browsers with proprietary JavaScript-encoding, which was given the name DHMTL (Dynamic Hyper Text Markup Language). After that time scripting, which creates for example dynamic menus standardized in the DOM-specifications (Document Object Model) by W3C. The standard scripting language is ECMAScript and JavaScript encoding is standard as much as it conforms with ECMAScript standards.

Newest browsers support DOM at various level. The best implementations are in newest MS IE, Mozilla Gecko browsers (for example Netscape 6.1+) and Opera 7.x browsers. Also Opera 4.x-6.x browsers have experimental support of DOM. The used JavaScript works in Opera 4.x and it supports necessary CSS-features but according to my experience the generic functionality of dynamic menus is bad. It is quite working in Opera 5.x-6.x browsers, but all DOM-based menus don't work in them. They support also some extensions of MS IE.

Because it is fully possible to create dynamic menus, which work at least in MS IE 4.x+ for Windows, MS IE 5.x+ for Mac, Netscape 4.x and Opera 5.x+ browsers, I concentrate in this page to give hints in order to create dynamic menus, which work in the previous mentioned browsers. How to design dynamic menus might work also older versions of MS IE for Mac, but I don't have any information about the functionality of the menus in these browsers.

Scripts which have been designed only for the Netscape 4.x series browsers don't work in Mozilla Gecko browsers, because Netscape 4.x use in dynamic menus the proprietary method document.layers(), which is not supported in Mozilla Gecko browsers. They don't support either proprietary Netscape 4.x LAYER and ILAYER elements (it is in principle possible to use with them the element IFRAME but I don't regard using it very reasonable because of some problems). How to design dynamic menus should be made by using the method document.getElementById() (maybe in some situations getDocumentElement() could be used too). Scripts which work in Netscape browsers should include methods both for both Netscape 4.x and Netscape 6.x browsers.

It is easiest to create dynamic menus with some commercial applications. DHTML Menu Builder generates automatic necessary HTML-structures and CSS for different browsers. Older versions of the application create invalid CSS (most recent versions create standard CSS). If the CSS is not valid, menus work in some browsers only together with such HTML document types, when the browser don't work in the standard(-compliant) mode.

If you know PHP, I have tried to create a model in order to update dynamic menus easily with PHP. Menus, which I handle in this page are static HTML-code.

In this purpose is also free scripts. The original script, which I have used seems to be made by a quite new version of Macromedia Dreamweaver (according to an e-mail starting it is used starting from the version 4.01; the script is not in my sites in the original format). The usage of the main function (MM_showHideLayers(), the version 3.0) has been thought in many Web-sites, for example in TecsOfTheWeb.Com. Even if the script base on encoding of a commercial application, it can be freely used.

The site of the Finnish TV channel Nelonen (nelonen = four) use the same script as I have used in one level sub-menus. The site used however slow Java applets for Netscape 4.x. By giving as the keyword for search engines the name of the main function, it is possible to find much Web-sites, which use the same function, which I have used. As another example of good working dynamic menus in Opera (and presumably also in other new browsers) is also the site of Yomi Media (it use another JavaScript-encoding, but it use a resembling working system).

From the Internet can be found also other scripts, which work in Netscape 4.x and older MS IE browsers, but which don't work in Opera 4.x-6.x and Mozilla Gecko browsers (Opera 7.x supports the proprietary DHTML of MS IE, when at least a part of dynamic menus for old MS IE browsers work in that browser). Some versions of MS Frontpage creates scripts, which don't work in all DHTML/DOM supporting browsers. Scripts might be done also so, that they work in new MS IE and Netscape browsers, but not in older versions of MS IE and Netscape browsers. Below is an Web-address, which teach building dynamic menus, which work in most DOM1 supporting browsers (MS IE 5.x+ for Windows, Opera 4.x+ and quite new Mozilla Gecko browsers), but not in older MS IE and Netscape browsers.

Also MS IE 5.0 for Mac supports DOM1. Webreview writes about the support at the following way:

A good portion of DOM1 is supported in IE 5 for the Mac (chunks of DOM1 core are missing). However, the DOM support in Mac and Windows IE 5 is not consistent. This code is not cross-platform, and the Macintosh engine, while perhaps better at implementing DOM 1.0, is not consistent with IE 5 for Windows in all areas.

The advance of of the used script is that it works in all browsers, which overall support dynamic menus. The script has alternatives both according to proprietary DHTML and standard DOM working browsers. Advice, which I give in this page base on one ready made script (it is not necessary to change it at all).

Browsers have however problems, when it is difficult to find optimal solution. I give higher priority to newest browsers, if satisfactory solution for all browsers can't be found. In principle - but after hard work - it is possible with the used script to create in most browsers working nice "hand made" dynamic menus. For eldest DHTML supporting browsers might be reasonable to give static links. I explain in a separate page, how my own used dynamic menus work in different browsers.

If you use another code, dynamic changes must base on changing the value of the property visibility, because dynamic changes of the display property don't work in Opera. If you use the latter way, make sure, that users of Opera get at least so much links, that navigation is in overall possible without dynamic menus.

DHTML/DOM-menus can be in principle replaced with dynamic pseudo classes (:hover, :active and :focus) and IFRAME elements. I made some pages, which have experimental sub-menus. In my tests systems work only in MS IE 5.5+ for Windows and Netscape 6.1+ (should work also in corresponding other Mozilla Gecko browsers), but not at all in any Opera browser (indeed works almost in Opera 7.0 Beta 1). Like DHTML/DOM menus IFRAME-based menus don't work in all browsers. That's why browsers should have the possibility to navigate the site also without the IFRAME-support. Because the functionality of this solution is very limited, I don't recommend anyone to use it. The only advance of this solution is that JavaScript support can be turned off. By using only CSS it is however possible to create only one level dynamic menus but DHTML/DOM menus can be as multi-level as necessary in individual cases.

Previous page

Sections of page:

Next section

Last section