Javascript Drop Down Menu Example

This is a very simple example of a javascript dropdown menu, using the form tags and option buttons:

 

 

In the head section of your document, place the following javascript function: 

<script type="text/javascript">
function dropdown()
{
location=document.forms[0].links.value
}
</script>

And then in the body section, place the following code where you want the menu to be:

<form>
<select id="links" onchange="dropdown()">
<option>-Select location-
<option value="http://www.siskiyous.edu">COS Home Page
<option value="cal.htm">CSCI 28B Calendar
<option value="project.htm">CSCI 28B Project
</select>
</form>

You will need to substitute your URLs and words to display in the option boxes.  This script works by passing the value (URL) to the dropdown function when the web user chooses an option (onChange).  The location command acts as the anchor tag.

 

 

Javascript Menu Example #2 ( a little more complicated)

Javascript Menu Example #3 (very complicated)

 

All examples courtesy of w3schools.com http://www.w3schools.com/dhtml/dhtml_examples.asp . Scroll down to menu section.

Assignment: Create a new page named jsmenu.htm and place one of the three example menus on it. Your page should have something on it in addition to the menu, so you may want to start by making a copy of one of your other assignments and adding the menu to it. FTP the file to your web server account and make sure you check all the links.  You may do this assignment in addition to the rollover assignment as extra credit, or you may do this one in place of rollover.htm.

 

Another interesting Javascript menu example: http://www.surflocal.net/MedfordOR/     Notice how the menu (on the left) moves when you scroll down the page.