Webmasters' Support Group

• A to Z Listing
• Campus Map
• Help

Drop-down menus require the use of JS and CSS to implement. This example shows but one-way to execute the menus. The concept to the drop-down menus is that each menu is placed on a separate layer and then each layer is made visible or hidden based on the user's input.

Conceptually, it is best to place the layers with the menus at the bottom of your page just before the </body> tag. This will place the menus at the very bottom of the page if the browser doesn't support them. If you put them at the top of the page, they would push the content down on non-supporting browsers and generally look bad.

Drop-down menus are usually combined with Rollovers to activate the menus visibility. Please be familiar with rollovers before trying this example.

To implement, you will need to have two scripts at the top of the page. We will make the assumption that the browser is Netscape and code for it, and change the code if the browser is Internet Explorer.

<script language="JavaScript">

function displayMenu(layername) {
  hideMenu();
  if (document.all) {
    eval ("document.all." + layername + ".style.visibility = 'visible'");
  } else {
    eval ("document." + layername + ".visibility = 'visible'");
  }
}

function hideMenu() {
  if (document.all) {
    document.all.layer1name.style.visibility = 'hidden';
    document.all.layer2name.style.visibility = 'hidden';
    document.all.layer3name.style.visibility = 'hidden';
    etc...
  } else {
    document.layer1name.visibility = 'hidden';
    document.layer2name.visibility = 'hidden';
    document.layer3name.visibility = 'hidden';
    etc...
  }
}

</script>

This section has a function that is called to display a menu. The layer that we want visible is passed to the script and it then hides all the menus and makes the one we want, visible. The second script is to hide all the menus and is called by the display script. This script just lists each layer that is on the page and makes them hidden. You must list all the layers that exist on the page. Miss one and it won't be hidden and add one that doesn't exist and the script will error.

<a href="" onMouseOver="displayMenu('layer1name')"><img src="imagename" width=61 height=20 alt="" border=0></a>

Each link will pass the layer name (layer1name in this example). The anchor tag can be around an image, as in the example, or around text.

The final part is adding the layers. Remember to put these at the bottom of the page.

<span id="layer1name" style="top:102px; left:0px; visibility:hidden; position:absolute">

Insert your code for the menu. This is usually in some form of table.
</span>

Each layer needs to have a unique name (layer1name in this example can be almost anything). The style attribute sets the number f pixels from the top of the page and the number of pixels from the left of the page. Change these to position the menu where you want it (usually through trial and error). The visibility is set to hidden when it loads (you don't want all of your menus visible a the beginning) and the positioning is absolute. The other option for positioning is relative, but it is more difficult to implement.

---

• Feedback
• Privacy Policy
• Terms and Conditions
• © 2010 Regents of the University of California