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