Make your own free website on Tripod.com

Drop Down Menus

Basic
Here is a sample of a basic drop down menu.

You can view the HTML for that, but here are the important parts:

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

That goes in the <head> section, usually after the </title> tag, but before the </head> tag, like this:

<head>
<title>...</title>
CODE HERE
</head>

Next, use this code to make the drop down menu:

<form name="form1">
  <select name="jenmenu" onChange="j_dropdown('parent',this,0)">
    <option value="#" selected>Drop Down Menu</option>
    <option value="#">-----------------------------------------</option>
    <option value="content.html">Content Page</option>
    <option value="bio.html">Bio Page</option>
  </select>
</form>

To make different menu options, you make another one of these:

<option value="PAGE ADDRESS">TITLE</option>

If you don't want the item to go anywhere, like a header, then set the value to "#".

Menu With Go Button
Here is menu with a go button.

This is the <head> content, like above:

<script language="javascript" type="text/javascript">
<!--

function jenMenu() { 
  PageJump=document.ddMenu.navitems.selectedIndex 
  if (document.ddMenu.navitems.options[PageJump].value != "#") { 
    location = document.ddMenu.navitems.options[PageJump].value 
  } 


//-->
</script>

And this is the code for the menu:

<form name="ddMenu">
  <select name="navitems" size="1"> 
    <option value="#" selected>Drop Down Menu</option>
    <option value="#">-----------------------------------------</option>
    <option value="content.html">Content Page</option>
    <option value="bio.html">Bio Page</option>
  </select>
  <input type="button" value="Let's Go!" onclick="jenMenu()">
</form>

Don't forget to edit value="Let's Go!" to whatever you want the button to say.

List Style
Here is a sample of a list style menu.

Head code:

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

And the menu:

<form name="form1">
  <select name="jenmenu" onChange="j_dropdown('parent',this,0)" size="4">
    <option value="#" selected>Drop Down Menu</option>
    <option value="#">-----------------------------------------</option>
    <option value="content.html">Content Page</option>
    <option value="bio.html">Bio Page</option>
  </select>
</form>

The only real difference between this menu, and the basic menu is in the first <select> tag, the size is set to 4!

Targeting Frames
Here is a menu that target's frames.

On the page that contains the menu, use this in the head code:

<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>

And the menu:

<form name="form1">
  <select name="jenmen2" onChange="MM_jumpMenu('parent.frames[\'content\']',this,1)">
    <option value="#" selected>Click Me</option>
    <option value="bio.html">Bio Page?</option>
    <option value="stuff.html">Stuff Page?</option>
  </select>
</form>

Change the word "content" to the name of the frame you want targeted.

Opening In A New Window
Here is a menu that opens in a new menu.

Here is the <head> code:

<script language="javascript" type="text/javascript">
<!--

function jenMenu() { 
  PageJump=document.ddMenu.navitems.selectedIndex 
  if (document.ddMenu.navitems.options[PageJump].value != "#") { 
    File = ddMenu.navitems.options[PageJump].value;
    window.open(File,'newwin'); 
  } 
}

//-->
</script>

And the menu:

<form name="ddMenu">
  <select name="navitems" size="1"> 
    <option value="#" selected>Drop Down Menu</option>
    <option value="#">-----------------------------------------</option>
    <option value="content.html">Content Page</option>
    <option value="bio.html">Bio Page</option>
  </select>
  <input type="button" value="Let's Go!" onclick="jenMenu()">
</form>

Adding Style To Your Menu
The menu here has color and font controls added.

First, add this style sheet to your <head> section. (You can put it after the <script> .... </script> section, or before, it doesn't really matter. Putting it somewhere after the </title> tag, however, would be best.)

<style type="text/css">
<!--
.menu {  
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
color: #000000; 
background-color: #0099CC; 
border: 1px #666666 solid; 
width: 200px;
}
.button {  
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
color: #000000; 
background-color: #0099CC; 
border: 1px #666666 solid; 
width: 100px;
}
-->
</style>

You can change the above menu to suit your needs.

Now, add the controls to your menu.

Add class="menu" to the select tag. It could look like this:

<select name="jenmenu" onChange="j_dropdown('parent',this,0)" class="menu">

If you have a button, add class="button" to the <input> tag, like this:

<input type="button" value="Let's Go!" onclick="jenMenu()" class="button">

To control the individual backgrounds of each menu option, you can do this:

<form name="form1">
  <select name="jenmenu" onChange="j_dropdown('parent',this,0)" class="menu">
    <option value="#" selected>Drop Down Menu</option>
    <option value="#"></option>
    <option value="content.html" style="color: #FFFFFF; background-color: #333333">Content Page</option>
    <option value="bio.html">Bio Page</option>
  </select>
</form>

Main?