JavaScript is frequently used for drop-down menus, but they are usually badly implemented, and unusable if the user has an older browser or javascript turned off. The code below implements an accessible drop-down menu — if the user’s browser does not support the appropriate javascript, the menu appears in a column down the left of the screen with the page content to its right.
In the <head> section of the document put the following stylesheet:
<style type="text/css">
#menu1{
background:background1;
width:width1;
overflow:hidden;
}
#menu2{
background:background2;
width:width2;
overflow:hidden;
}
/* ...and more if necessary for other menus */
<style>
Here width1, width2 and so on should be replaced with the width of the menu including units (for example, 128px).
background1, background2 and so on should be replaced with the background (for example, #fff).
If the menu is entirely solid (for example, one big image) the background: lines are not needed.
Otherwise they must be specified — an extremely poor design decision by Microsoft means that the default transparent background doesn’t work with DHTML in Internet Explorer — if you need a transparent background, use a transparent GIF or PNG.
To ensure that the menu is visible if the user’s browser doesn’t support the appropriate JavaScript, the other properties that would usually be set in a stylesheet are set by the javascript function below.
Also in the <head> section of the document put the following JavaScript:
<script type="text/javascript">
function menu(){
menu_1=document.getElementById('menu1');
menu_1.style.position='absolute';
menu_1.style.left=left1;
menu_1.style.top=top1;
menu_1.style.height=closedheight1;
menu_2=document.getElementById('menu2');
menu_2.style.position='absolute';
menu_2.style.left=left2;
menu_2.style.top=top2;
menu_2.style.height=closedheight2;
/* ...and more if necessary for other menus */
}
<script>
Here left1, left2, top1, top2 and so on should be replaced with the co-ordinates of the menu, including and quoted (for example, '128px').
closedheight1, closedheight2 and so on should be replaced by the heights of the menus when ‘closed’, with units and quoted (for example, '32px').
Note the underscores in the menu object names — this is becaused Internet Explorer instantiates elements with ids as JavaScript objects, but other browsers don’t, so the ids can’t be used.
The <body> element must now have an attribute to call this function — for example <body onload="menu();">.
In the <body> section of the document put the following code:
<div style="float:left;">
<div id="menu1"
onMouseOver="menu_1.style.height=openheight1;"
onMouseOut="menu_1.style.height=closedheight1;">
<!-- put the first menu's content here -->
</div>
<div id="menu2"
onMouseOver="menu_2.style.height=openheight2;"
onMouseOut="menu_2.style.height=closedheight2;">
<!-- put the second menu's content here -->
</div>
<!-- ...and more if necessary for other menus -->
</div>
Here openheight1, openheight2, closedheight1, closedheight2 and so on should be replaced by the heights of the menus when ‘open’ and ‘closed’, with units and quoted (or example, '128px') — the ‘closed’ heights should be the same as those specified in the javascript.
Note the outer <div> — this ensures that if the user’s browser does not support the appropriate JavaScript the menu appears in a column down the left of the page with the content to its right.
Note also that the onMouseOver and onMouseOut attributes refer to the menu objects created by the menu() function called the the <body> element's onLoad attribute.
Writing DHTML for many browsers
Writing DHTML that works with a range of browsers is not easy, as their implementations of the standard (ECMA-262) differ. The JavaScript Developer’s Dictionary details how different browsers respond to JavaScript, and is very helpful in writing cross-browser DHTML.