Popup Menu Layers with Menu Hover Effects

Hover over the links to see the menu layers demonstrated. The links and menu item links go nowhere in this example.

Note: This example is more menu-like in its appearance and functionality. The background color of menu items changes onmouseover and mouseout. Also, the viewer doesn't have to click on the link text to activate the link. Clicking anywhere on the menu item will work.

This is accomplished through style sheet settings rather than script, but unfortunately, IE 5.0 on windows doesn't have adequate CSS support to display properly. Menu item links are set display: block in lists, which causes too much margin to appear for IE 5.0 Win. One solution would be to use just links, rather than links inside list items, but that would cause accessibility problems for incapable browsers.

You can set up links anywhere in your document to show menu layers. You can set up as many menu layers as you like with this code.

If your links appear near the window edge, the code adjusts the position of the layer so it will appear within the available window space.

The menu layers are set up using div's and menu items are in unordered lists. Their appearance is controlled with style sheets.

 

www.dyn-web.com