Sample Web page using a cascading JavaScript dropdown menu:

dropdown.zip | Visual Example: Dropdown

Web sites offering excellent dropdown menus: Milonic | JSCookMenu
 

Sample JavaScript menus

A variety of navigation menus are available in themenus.zip file (82 KB) on this Web site. They include:

• A vertical cascading style sheet menu contained within a table cell.

• A horizontal drop-down menu using an external style sheet and and external javascript file.

• A vertical menu that dynamically expands the chosen menu item when clicked on while contracting the rest.

• A simple, horizontal tabs menu that uses the Javascript "mouseover" code in the html file to display a foreground tab when the cursor goes over the tab.

Visual Examples: Fixed | Switch | Tabs | Vertical Menu

How to use JavaScript rollover images

"Event handlers" are JavaScript code that are not added inside the <script> tags, but rather, inside the html tags. They execute JavaScript when something happens, such as pressing a button, moving your mouse over a link, submitting a form, etc. The most common use for these event handlers are rollover images.

Rollover images are images that change when the mouse is over them. Rollover images are really two images: one image when the mouse is over, and another when it is not. Javascript swaps between them when the mouse moves over (onMouseOver) and when it leaves being over (onMouseOut). The hover buttons below uses the following code in the BODY section of the Web page:

<a href="home.htm" onmouseover="document.myimage1.src='home2.gif'" onmouseout="document.myimage1.src='home1.gif'">
<img name=myimage1 src=home1.gif border="0" width="101" height="21"></a>&nbsp;

<a href="contact.htm" onmouseover="document.myimage2.src='contact2.gif'" onmouseout="document.myimage2.src='contact1.gif'">
<img name=myimage2 src=contact1.gif border="0" width="101" height="21"></a>&nbsp;

<a href="links.htm" onmouseover="document.myimage3.src='links2.gif'" onmouseout="document.myimage3.src='links1.gif'">
<img name=myimage3 src=links1.gif border="0" width="101" height="21"></a>

Move the mouse over the buttons

   

Move the mouse over the image	Move the mouse over the links
	cactus | flowers | sculpture Visual Example