 |
Dynmenu, tutorial on Dynamic menus with DHTML | |||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||
 |
|
|||||||||||||||||||||||||||||||
|
português | |||||||||||||||||||||||||||||||
 |
On this page you will find a detailed description of each file used in this tutorial. Feel free to copy and paste the code to your own pages and adapt it to your needs. There are excerpts of the files shown in the code and you can access the whole files by viewing their sources. The Dynmenu is designed with modularity in mind. That's why most of the code is stored in separate files that are linked into the HTML pages. This will help you building the code for multiple pages and, especially, maintain, revise and update it later. |
||||||||
| Style sheet: dm.css | |||||||||
|---|---|---|---|---|---|---|---|---|---|
This file fulfils a double task:
Only the first function is relevant for the dynamic menus, but remember that is much wiser to use style sheets to code the visual layout of your pages than doing it inside the HTML pages: you make sure the design is consistent throughout the site and it there is only one file to modify when you update the site, instead of hundreds of pages to change. Each dynamic menu is defined by a code similar to:
The elements on the line are the following:
In this tutorial I used five menus with equal width. Naturally, you could change the number, spacing and width of the menus. Just be sure to set their initial positions correctly. I advise you not to constrain the sizes of the menus for maximum flexibility of the menu contents. If you want to constrain the width, use a table in the menu code and omit the height setting to accommodate more text, larger text or more menu entries. There also additional parameters you can add to suit your tastes, such as:
|
|||||||||
| Functions: dm_func.js | |||||||||
This file holds
Only the former are relevant for the dynamic menus but the latter add an often appreciated - and now common - feature of image links. The file begins with the definition of an Boolean array, with one entry per menu. I defined the menus by numbers, from 0 to 4, from left to right and the array follows the same sequence. If one layer is visible, the appropriate array entry is true, otherwise it is false. Then, there is the definition of a time-out array. If the layer's visibility is dependent on an impending time-out, its ID is stored in the appropriate entry of the array. Otherwise the array value is meaningless. In this tutorial I use 5 menus, hence the number five. For the sake of generality, you should use a constant with the number of menus. There are only to actions applied to the menus: show and hide, corresponding to the functions The
The next action is to change layer visibility to "visible". However, the code must be forked to meet the different implementations of layers by the various browsers:
The first line is interpreted by newer browsers that adhere to the World Wide Web Consortium (W3C, www.w3c.org) Document Object Model specification. This is the case for Netscape Navigator 6 and later and Microsoft Internet Explorer 6 and later. The name of the "element" is composed by "dynmenu" plus the index "idx" and its property .style.visibility is set to "visible". The second line is addressed to Microsoft Internet Explorer 4 and 5 releases. The name of the "element" is composed by "dynmenu" plus the index "idx" and its property .style.visibility is set to "visible". In this case, the layers are found under the document.all object array. The third line is addressed to Netscape Navigator 4 release. The name of the "element" is composed by Then, the dynmenu array is updated, by setting the entry to true:
Finally, a timer is set: if the user does not select one entry within 8000 milliseconds, the visible layer will be automatically hidden:
This feature helps novice users that are not comfortable with layers and want to view the page without being disturbed by superimposed content. This solution has a shortcoming, though: if the user keeps the pointer over the dynamic for longer than the specified time, the menu will disappear and the user will have to return to the top tab to show it again. Thus, the time-out should balance the two conflicting goals. Other implementations could solve this issue by automatically hiding the menu when the pointer is not over it. However, I prefer this solution because it is simpler for novice users and experienced users click the desired menu entry at once without any disturbance. The
Then, it sets the visibility property of the idx-layer to "hidden". Again, the code must be forked to accommodate the differences among browsers:
The first line is interpreted by the browsers that adhere to the World Wide Web Consortium Dynamic HTML specification. The second line is addressed to Microsoft Internet Explorer 4 and 5 releases. In this case, the layers are found under the document.all object array. The third line is addressed to Netscape Navigator 4 release. In this case, the layers are found under the document.layers object array. Finally, the dynmenu array is updated, by setting the entry to false:
The roll-over image effect is implemented with two functions: When the pointer (also known as the cursor) passes over an image with the roll-over the source of the image is changed to a filename equal to the current filename with the "ov" suffix: if the source of an image is the "XYZ.jpg" file, the source of the roll-over image is "XYZov.jpg". Thus, every roll-over image's source must be duplicated with a source with the "ov" suffix. The
When the pointer leaves an image with the roll-over the source of the image is restored to the original filename, without the "ov" suffix by means of the
This code is general purpose and is independent of the paths of the images. The only requirements are the use of the "ov" suffix and the three letter extensions. You should be aware that only the image's source is changed. The size of the original image is kept, regardless of the actual size of the roll-over image. |
|||||||||
| Menu entries: dm_en.js | |||||||||
|
The dm_en.js file holds the content of the dynamic menus. If you're creating a multilanguage site such as this portuguese/english one, the two previous files could be common to all languages since they contain just the code and only this file reflects the content. The dm_en.js file holds the english menus and the links to the english pages, whereas the dm_po.js file holds the portuguese menus and the links to the pages in portuguese. The coding is straightforward. The file contains a single JavaScript statement to write the HTML code in the document:
The example above shows the code for a single menu. The other menus are similar. The paths of the links shown on this example are relative; if you want to use the same dm_en.js file for pages spread across multiple folders/directories, you must use one of two methods:
The latter method is more efficient but the debug of the site offline becomes harder, unless you put your site on one root of the file system (in MicroSoft environments, this is a drive-letter). I advise you to the perform the line wrapping of the code manually because you can not use line breaks in JavaScript statements. In spite of the appearance of the code sample above, I use no line breaks in the dm_en.js file. If the line length exceeds the limits of your word processor use a |
|||||||||
| HTML pages | |||||||||
The three previous files contain the core of the dynamic menus. In the HTML pages, you just need to link the files and add the event handlers. Since all files have equal implementations of the dynamic menus, only the relevant sample of codes is described:
And the implementation of the dynamic menus is completed... Simple, wasn't it ? |
|||||||||
| ©2003 João Gomes Mota |
|
||||||||
