Inserting the Jump Menu

You will now need to create a jump menu. The jump menu is a drop down menu that house all the web pages by name. When you select one of the pages, it automatically takes you to that page. The pages you will need to load will be:

  • Home
  • Appetizers
  • Entries/Main Course
  • Desserts
  • Beverages
  • Online Order Form

Just below the Daily Special JavaScript in the body of your document, copy the following code for a jump menu. Make sure you change the html page code to the name of your html page.

The following code should be put in the head section of your document, just above the </head>

<script language="JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>

The second JavaScript needs to be placed where you want your actual jump menu to display. You want the jump menu to appear at the top of the home page. Open your home page in your text editor then place the below script just below the beginning body tag:

<form name="form1">
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
<option value="home.html">Home</option>
<option value="appetizers.html">Appetizers</option>
<option value="entriees.html">Entrees</option>
<option value="beverages.html">Beverages</option>
<option value="desserts.html">Desserts</option>
<option value="form.html">Online Form</option>
</select>
</form>

Be sure that your html pages are titled right. You will also need to change the loading of your page from parent to self so that the web page will load in the documents window.

Create a button for each of your six external pages allowing easy navigation back to the drop-down menu.

You can give the form name and select name any name. Save your work then view it in a browser. The only thing you need to do now it to align it to the center.

For those who would like a drop down menu instead of a jump menu, replace the jump menu script with the script below:

STEP ONE: Paste this code just above the end of head tag of your HTML document:

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Original: Arun kumar (n_arunk@hotmail.com) -->

<link href="CascadeMenu.css" rel="stylesheet">
<script language="javascript" src="CascadeMenu.js">
</script>

STEP TWO: Insert the onLoad event handler into your BODY tag and adjust the background color to match your page:

<BODY OnLoad="InitMenu()" Onclick="HideMenu(menuBar)" ID="Bdy" bgColor=aliceblue>

STEP THREE: Copy this code into the BODY of your HTML document where you want your menu to appear:

<font color="#800080"><b>Utterly Outrageous Cuisine</b></font></p>
<!--MenuItem Definition for the entire menubar-->


<DIV Id="menuBar" class="menuBar">
<DIV Id="Bar1" class="Bar" menu="menu1">Home</DIV>
<DIV Id="Bar2" class="Bar" menu="menu2">Menu</DIV>
<DIV Id="Bar3" class="Bar" menu="menu3">Form</DIV>
</DIV>

<!--MenuItem Definition for first drop down button-->

<div Id="menu1" class="menu">
<div Id="menuItem1_1" class="menuItem" cmd="drop_downtest.html">Home</div>
</div>

<!--MenuItem Definition for second drop down button-->
<div Id="menu2" class="menu">
<div Id="menuItem2_1" class="menuItem" cmd="appetizerpage.html">Appetizer</div>
<div Id="menuItem2_2" class="menuItem" cmd="entreepaget.html">Entree</div>
<div Id="menuItem2_3" class="menuItem" cmd="beveragepage.html">Beverage</div>
<div Id="menuItem2_4" class="menuItem" cmd="dessertspage.html">Dessert</div>
</div>

<!--MenuItem Definition for third drop down button-->
<div Id="menu3" class="menu">
<div Id="menuItem3_1" class="menuItem" cmd="formpage.html">Online Form</div>
</div>

<!-- End of Menu -->

You will also need to place these two external files in your folder:

CascadeMenu.js

CascadeMenu.css