OUTDATED
Many javascripts are dealing with this issue, but a lot tend to rely on complex html, or even js code to create a menu structure, which doesn't conform to the w3c Accessibility Initiative nor it is readable for developers and site maintainers.
Originaly this script was developed for a web project by http://www.knallgrau.at and is herby made public to encourage developers and site creators to use and extend it.
If you find this script useful, have some ideas or even better some extensions, sytlesheets or patches please contact me at matthias AT knallgrau.at.
Example
This is the menu structure. It's basically an unordered list. the root element needs to get an id, so you can apply the menu script.
You may also add a noscript section, if you like to inform your users what they are missing.
<div id="menu"><a name="menu"></a>
<noscript>
The following list is rendered as an dropdown menu on Javascript enabled browsers.
</noscript>
<ul class="level1 horizontal" id="menu-root">
<li id="level1-One" class="level1">
<a href="http://knallgrau.at">Top One</a>
<ul id="level1-One" class="level2 dropdown">
<li class="level2"><a href="http://knallgrau.at">Sub A</a></li>
<li class="level2">
<a href="http://knallgrau.at">Sub B</a>
<ul class="level3 flyout">
<li class="level3"><a href="http://knallgrau.at">Level 3 One</a></li>
<li class="level3"><a href="http://knallgrau.at">Level 3 Two</a></li>
<li class="level3"><a href="http://knallgrau.at">Level 3 Three</a></li>
</ul>
</li>
<li class="level2"><a href="http://knallgrau.at">Sub C</a></li>
<li class="level2">
<a href="http://knallgrau.at">Sub D</a>
<ul class="level3 flyout">
<li class="level3"><a href="http://knallgrau.at">Level 3 AAA</a></li>
<li class="level3"><a href="http://knallgrau.at">Level 3 BBB</a></li>
<li class="level3"><a href="http://knallgrau.at">Level 3 CCC</a></li>
<li class="level3"><a href="http://knallgrau.at">Level 3 EEE</a></li>
</ul>
</li>
</ul>
</li>
<li class="level1"><a href="http://knallgrau.at">Top Two</a></li>
<li class="level1"><a href="http://knallgrau.at">Top Three</a></li>
<li class="level1">
<a href="http://knallgrau.at">Top Four</a>
<ul class="level2 dropdown">
<li class="level2"><a href="http://knallgrau.at">Sub A</a></li>
<li class="level2">
<a href="http://knallgrau.at">Sub B</a>
<ul class="level3 flyout">
<li class="level3"><a href="http://knallgrau.at">Level 3 One</a></li>
<li class="level3"><a href="http://knallgrau.at">Level 3 Two</a></li>
<li class="level3"><a href="http://knallgrau.at">Level 3 Three</a></li>
</ul>
</li>
<li class="level2"><a href="http://knallgrau.at">Sub C</a></li>
<li class="level2"><a href="http://knallgrau.at">Sub D</a></li>
</ul>
</li>
<li class="level1"><a href="http://knallgrau.at">Top Five</a></li>
</ul>
</div>
Load the stylesheet and javascript and apply the dropdown menu code onStart in the body tag.
<head>
<title>Dropdown Menu Demo</title>
<link rel="stylesheet" type="text/css" title="CSS Stylesheet" href="dropdown.css" />
<script type="text/javascript" src="dropdown.js"></script>
<script type="text/javascript"><!--
/*
* for an example with all possible settings see:
* dropdownmenu.js -> Menu.prototype.config
*/
function configMenu() {
this.closeDelayTime = 300
// this.collapseBorders = false;
}
var menu;
function initMenu() {
// don't use var here!! we will need menu as a global variable to store the closingDelay
// the first parameter is the id of
menu = new Menu('menu-root', 'menu', configMenu);
}
//--></script>
<body onload="initMenu()">
Download
ListAsDropDownMenu.zip
In this archive you need:
- dropdown.js
- dropdown.css
(modify this stylesheet for your needs)
