HTML: A Guide to Hard-Coding

 
   

Starting your first page

The Body

Paragraphs

Headings

Images

Fonts

More Fonts

Line Breaks

Links

Colors

Backgrounds

Horizontal Lines

Mailto

Basic Tables

Advanced Tables

Putting your page Online

Frames

Forms

The Head

JavaScript Drop-Down Menu

Cascading Style Sheets

Basic HTML tags

HTML Home

 

 

Dreamweaver Tutorial

Adobe Acrobat

Faculty Resource Center

 

Susan's Homepage

 

Making a JavaScript Drop-Down Menu

This code will make a drop-down menu that will automatically take the view to the chosen page without hitting a "go" button. Scroll down to find an example of this kind of menu. A menu such as this is a very useful navigational tool.

Type this code between the <head> and </head> tags:

<script>

<!--

function land(ref, target)

{ lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{ ref=menu.choice.options[menu.choice.selectedIndex].value; splitc=ref.lastIndexOf("&");
target="";
if (splitc!=-1)
{loc=ref.substring(0,splitc); target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}

-->

</script>

 

OR, the better way to do it is to go to "View" "page source" in your browser, and copy the code from the <head> of this document, then paste it into the head of yours.

 

The next thing that you want to do is add the menu to the body of your document. You can do this by using a form. Here is the code:

<Form action="" method=post name="">


<select name="choice" onChange="jump(this.form)">


<option selected>Choose a Destination</option>
<option value="url.html">Describe the link here</option>
<option value="url.html">Describe the link here</option>
<option value="url.html">Describe the link here</option>
<option value="url.html">Describe the link here</option>

</select>

</form>

You will need to modify the value of each option. Enter the URL you wish to jump to.

You will also need to modify "Describe the link here" to a suitable description of the link you are jumping to.

You should get a drop-down menu that looks like this one, but with "choose a link" replaced with "Choose a Destination," and different links, of course.

That's all there is to it.

Go on to the next page.