Dynamic HTML (DHTML) is a mixture of HTML, Javascript, and Style Sheets which can be used (among other things) to
create menus which pop out or drop down when the mouse hovers over them. These are very useful on a large website because the
user can see at a glance all the pages available without having to search for them by clicking
through categories. Pages which a user might never even be aware of can be instantly viewable, using a style which users of Windows and other operating systems are already very familiar with. Use of a DHTL menu
will increase the number of pages visited within a site by a dramatic percentage.
a floating DHTML menu in the left-hand margin of this page.
This is powered by Milonic and
was chosen because:
it can be set as static, or a floating menu if desired.
it works well in IE4.
it allows categories to be high-lighted in a different color.
it is free to non-profits – though it is well worth the $30 that others should pay, and its creator Andy Woolley is constantly working to extend the range and features.
incidentally, it offers some useful other options, such as draw-down menus based on a country map.
There are a wide range of DHTML menu products available. I do not know of any comparison chart or review – if you find one, please
tell us. When choosing a menu, first
research carefully the features offered, the range of browsers and platforms it works in, and
how/whether it 'fails safe' in older/non-compliant/Javascript-disabled browsers.
Other people have recommended:
Hiermenus - it does appear to allow a subject area to be highlighted in a different color.
Dreamweaver MX includes a menu system called Behavior. You can see this working at
MOPS and Bridges.
An advantage of this system is that although it does not popup in a Javascript-disabled browser,
the basic menu remains visible and allows users to click through to fall-back category pages. There is also no obvious loading-time penalty to the page.
Cool Menu FX Tool is not a DHTML popup, but it does create an unusual style of navigation buttons which could be appopriate to certain types of website, perhaps for children.
DHTML menus need Javascript to operate and are invible without it. About 4% of web users do not have Javascript-enabled browsers.
You must make a noscript alternative if the system does not incorporate one.
Because menus operate using Javascript, ensure that search engines can spider throughout your
site via non-Javascript links.
In order to operate over a range of browsers and operating systems, menus require one or two large Javascript files which take time to download and more time to process.
There may therefore be a significant time delay before the page becomes visible. Remember that if visitors face a blank screen for 10 or 15 seconds, some will leave.
Assess operating examples of different menus for speed and usability – and remember that many
people are on slow dialup connections which in practice are no faster than 28k.
There may be ways to minimize apparent page-loading delays – e.g. place the Javascript links at the end of the page, or insert the menu within a fixed-size table
so that even if it is slow to load, it does not prevent the rest of the page from loading.
It can help visitors if the current subject areas within the menu is color-coded.
(Yellow is used on our menu to do this.) Subject-area color-coding is well worth adding to a non-DHTML menu too -
and can be done very easily on PHP pages (Dreamweaver has a tool to help) or with Style sheets. In either case, the method
is to set default colors separately for each element of the menu over the whole site, and then over-ride the appropriate section with a different
color by an individual coding lower down on each page. There are PHP solutions for this too.
If you want to make a floating menu, but do not need a DHTML drop-down version, you can create a
floating one using Javascript – so of course you will need a noscript version too.
However, it is now possible to use CSS to create a fixed menu which does not scroll or jerk,
and this is probably a better solution that a floating menu.
The CSS alternative
It is now possible to create pure CSS drop-down menus. These have big advantages, and are replacing
DHTML as the menu of choice.
they fail safe – even in browsers that do not support them - i.e. the first level menu remains
visible, and so can be used to take people to a page with the further links for that topic
they do not need Javascript to operate (except for Internet Explorer
you can set as many levels as you need
there is no time delay for the page, as there can be for a DHTML page which needs to process the javascript each time the page loads
On the debit side, older versions of Netscape (a vanishingly small percentage of users) don't
handle these menus - but again, they fail safe here too.
However, they are an almost ideal solution, and this Guide will shortly be switching to CSS menus.
There are two solutions to a multi-level flyout menu:
Suckerfish
(see also this revised version: CSSCreator)
and the technically more complex
AdXMenu
which has the advantage of being able to float over any form elements on the rest of the page, and 'double-back' or reposition a final
submenu if there is not room on the page. It does need two style sheets, one javascript, and one
.htc file to work, but if you understand CSS well, it offers a great menu.
You can see an Adx Menu working at Internet Evangelism Day.
There are a growing range of remarkable pure CSS menus in many styles at
CSSPlay.
If you do not need a popout menu, but like their style, you can achieve remarkable vertical
or horizontal menus using an unordered list modified with CSS:
Samples with code.
There are other issues to consider in making a page easy to navigate.
There are a growing number of menu scripts available – some are free to non-profits, others
are pay for. Is is important to make the right choice, because there is a considerable time
investment in setting up a menu to fit your site needs. Take time to view different systems
working – if possible using a range of browsers and operating systems.
Here are some questions to ask yourself when choosing:
What range of browsers and operating systems does the menu operate with? Is it backwards compatible as far as
version 4 Explorer and Netscape? Other manufacters' browsers? Does it work well on Mac and Unix? What about the
What is the cost? Does this include future updates? If is free, is there a danger that it will
not continue to be upgraded, or less effort has been made to operate under less-used browsers or
operating systems?
What happens to the menu if Javascript is disabled? Can you create a noscript alternative?
(And note that menu links may not be spiderable by search engines, so you must create a sitemap
so that every page is no deeper in the site than two levels.)
What is a typical download time for the script, and does this impact the rest of the page?
Does the menu include mouseover color changes for each link – which helps people
be sure that links are working links?
Does the menu display any sort of tooltip or statusbar text to amplify details about each link?
Will the menu highlight the subject area a page is within, using a different color?
This sense of 'you are here' is very important for good navigation and usability.
FREE AND SIMPLE: Syndicate this page's content into your site
• Insert this page's text directly into your own website.
then copy/paste (CTRL+C/CTRL+V) this Javascript code into your own page:
help | example.
(Please DO NOT copy the actual text of this page onto your own site:
reasons.)
Other options for re-use.
• Or please link to this page • Add a Bulletin subscribe form to your site.
