Now you need to hook up this interface with a script so it will respond to mouse actions and actually do something useful. The main visual element used in a dropdown list is the hiding and revealing of the elements when they get clicked upon, which uses the visibility property.
When dealing with visibility, you immediately run into the pesky problem of the incompatible DOMs. Netscape's DOM is much more influenced by its LAYER tag and attributes than it is by stylesheets. So even though in the DOM you can specify that the visibility of an object should be set to hidden and Netscape will render it correctly, if you query the object like so:
if (daMenu.visibility == 'hidden')
you won't get the values in the stylesheets syntax but rather in the LAYERS syntax.
So if you set document.foo.visibility = 'visible', the code will behave as you intended, and the object named foo will become visible on the screen. But if you were to check the value with alert(document.foo.visibility), then you would be returned the value show. The solution to this is to set up some variables. Use the standard conditional and set a variable named visible to 'show' in Netscape and set 'visible' in Internet Explorer. And set a variable named hidden to be 'hide' in Netscape and 'hidden' in Internet Explorer. Then just use those variables in place of the string and you're OK.
<script>
if (document.layers) {
visible = 'show';
hidden = 'hide';
} else if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
function barTog(menu) {
if (document.layers) {
daMenu = document.layers[menu];
} else if (document.all) {
daMenu = document.all(menu).style;
}
if (daMenu.visibility == visible) {
daMenu.visibility = hidden;
} else {
daMenu.visibility = visible;
}
lastMenu = daMenu;
}
</script>
What the barTog function does is to set up the standard conditionals, then if the object specified in the passed variable menu is visible, hide the object, otherwise reveal the object. It then records the reference to that object in a global variable named lastMenu (so later you can turn it off). All you need to do is call it. So in the menu bar, you surround the word "Webmonkey" with an anchor, and then give the action when clicked.
<div id="webmonkey" class="daMenu">
<a href="#" class="itemAnchor"
onclick="javascript: barTog('moreMonkey'); return false;">
Webmonkey
</a>
</div>
This executes the barTog function, and passes it the name of the DIV that should be toggled on or off. It looks something like this.
next page»
