Table of topic groups > Front page of CSS-guide > Extra pages > I How to design dynamic menus > Used JavaScript encoding (section 2/6)

Sections of page:

First section

Previous section

Next section

Last section

Used JavaScript encoding

Topics

• Model files
• Functions

Model files

In DHTML/DOM menus the JavaScript encoding is related with CSS and HTML encoding. The system needs one JavaScript and few CSS files, encodings to head section and event handlers to the body sections of the document. Following example files (I have used them in my Finnish and English CSS-pages) can be freely used designing dynamic menus:

• The JavaScript file for dynamic menus ../Menumodels/layers.js.
• CSS-files for dynamic menus:
  • ../Menumodels/basicScreen.css. The CSS for dynamic menus is in the top of the file. It fits well for Opera 5.x+, MS IE 5.0+ and Netscape 6.x/ corresponding Mozilla browsers but not optimal for MS IE 4.0 for Windows.
  • ../Navigoinnit/layersMozilla4.css. CSS for Netscape 4.x browsers.
• Encodings in the head section of the document, which I have two versions (references to linked files and a part of the needed JavaScript are in these files):
  • ../Menumodels/AdviceMetaSu.inc (used in the Finnish CSS-pages; I have made into this version some new functions).
  • ../Menumodels/AdviceMetaEn.inc (used in the English CSS-pages)
• Encoding of the dynamic menus as files:
  • ../Menumodels/AdviceNavigationSu.inc (used in the Finnish CSS-pages; this version has shorter function calls
  • ../Menumodels/AdviceNavigationEn.inc (used in the English CSS-pages)
• Example pages:
  • ../Menumodels/NetscapeEnModel.html (English)
  • ../Menumodels/NetscapeSuModel.html (Finnish)

Generic notes:.

• I have today a little bit different corresponding files. I don't have anymore dynamic menus, which work in Netscape 4.x browsers. Netscape 4. gets else {} - Netscape 4.x doesn't do anything! MS IE 4.0 for Windows and such MS IE for Mac browsers, which support the proprietary DHTML of MS IE are however supported. The code doesn't include timer functions, because they cause problems in many browsers. If you don't need the Netscape 4.x support and timer functions you can download the following simplified code:

  • http://netti.nic.fi/~tapio1/Navigoinnit/layersSimple.js.

• If you want that they don't support dynamic menus such MS IE browsers, which supports only proprietary DHTML change the code and set CSS conditionally so that such MS IE browsers which don't support DOM1 gets different CSS as browsers, which support DOM1.

  function MM_showHideLayers() {
  if (document.getElementById)
  {
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) {
  v=args[i+2]; /* this code should not change into the format
  i<(args.length-1); i+=2)... v=args[i+1], because the changed script doesn't then work in MS IE 5.0 for Windows */
  {
  var Cmenu = document.getElementById(args[i]); v=(v=='show')?'visible':(v='hide')?'hidden':v; Cmenu.style.visibility = v;
  }
  } } else {}/* the formal termination, which is not necessary */
  }

Functions

Links of the dynamic menus can exist in the page or they can be generated by JavaScript encoding or some server-side systems. In the example pages links are inside tables. The JavaScript, which I have used just controls which menus will be revealed/ hided and how they will be revealed/ hided.

The main principle of dynamic menus is very simple. The author defines blocks, which work as dynamic menus. He sets for them id-attributes, which correspond values, parameters (they are called also as arguments) in the even handlers. The most used event handlers are onmouseover, onmouseout and onclick (the last can be replaced with href="javascript:" in situation, where normal links are not needed). I teach using of them. Functions, which Web-authors should detect when he designs dynamic menus are just three:

• The main function MM_showHideLayers(), which will be given sets of arguments, where each individual argument sets have three arguments. The first argument correspond the id-attribute, for example MM_showHideLayers('Pages','','show') concerns the element, which has id="Pages". The third tells, if the selected element will be hided or revealed (it has as the value either hide or show). Argument sets can be unlimited quantity and all arguments have bee separated with '' marks and commas, for example MM_showHideLayers('indexPages','','hide','allSites','','hide','Pages','','show');. I recommend that you would use only this function.

• Timer functions, for example piilota_valikot_hitaimmin('MainPages') (piilota valikot = hide menus), which control the situation, how long time the menu remains on the screen, when mouse has gone over the active link or area. I have several versions of them (I explain the differences in the source code). I have changed the names of the functions (if you change timing values or the names of the timer-related functions, I recommend that you would not touch to the other contents of the JavaScript-file).

• An assistance function ajastin_pois() (ajastin pois = timer off; it might be reasonable to change the name of the function), which is used together with the first mentioned function in order to take out of the timer functions (I links or area don't have in any conditions timer functions, this function is not needed).

Sections of page:

First section

Previous section

Next section

Last section