Automating DHTML menus
This show/hide part of this menu system works the same way as the basic menu system. This highlight/delay part of this menu system works the same way as the basic delay/highlight menu system.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
This version will create the full menu from a series of user defined arrays. This version also adds an extra feature, the links in the menu cells can also highlight. Many menus like this that are available also offer this feature but in order to produce the effect, they do not use links, and instead just use plain text. To change the colour in non-layers browsers they change the color style for the table cell. In layers browsers, which do not support dynamic changing of font colours, they rewrite the contents of the layer to be a different colour. My approach is different. I want links, not just plain text, as many more browsers can use my menus by clicking on the links, like WebTV for example, but cannot use plain text menus.
To produce the effect in layers browsers, I hide an extra layer inside the layer that holds the link. When the mouse hovers over the main layer, the hidden layer is shown. It contains just the text of the link coloured in the highlight colour. In non layers browsers, link color will not change if the color style of the table cell is changed as links use their own style. I use the ID attribute of the link to reference it using my generic referencing function and I then change the color style of the link itself. To change the images in layers browsers, I simply put the highlight image in the hidden layer. To change the images in non-layers browsers, I reference the image using the document.images collection and change it using pre-cached images. The images are only pre-cached if they are required.
The menus are fully customisable, with the following aspects of each menu adjustable using a simple system:
- width of menu items
- the target of each link
- normal image for right arrow
- highlight image for right arrow
- normal image for down arrow
- highlight image for down arrow
- normal background colour of menu
- highlight background colour of menu
- normal link colour of menu
- highlight link colour of menu
- border colour of menu
- border thickness of menu
- stylesheet for the links
- length of time to keep menu open when mouse is not over it
- initial left position
- initial top position
- orientation: vertical or horizontal
- scrolling: remain fixed on the page or screen (scroll this page to see what I mean)