	free hosting image hosting hosting reseller online album e-shop famous people

Creating A Drop Down Menu

The code below allows you to create a simple drop-down menu for site navigation or external links:

<form name="form1"> <select name="list" onChange="if (this.options[this.selectedIndex].value != 'null') {self.location.href=this.form.list.options [this.form.list.selectedIndex].value} "> <option value="null"> Destination</option> <option value="null"> ~~~~~~~~~~~~</option> <option value="page1.html"> Page 1</option> <option value="page2.html"> Page 2</option> <option value="page3.html"> Page 3</option> <option value="page4.html"> Page 4</option> <option value="page5.html"> Page 5</option> <option value="page6.html"> Page 6</option> </select> </form>

In the above example, the selected link page is loaded into the same window or frame.

To open each link in a new window, use this code:

<form name="form2"> <select name="list" onChange="NewWindow()"> <option value="null"> Destination</option> <option value="null"> ~~~~~~~~~~~~</option> <option value="page1.html"> Page 1</option> <option value="page2.html"> Page 2</option> <option value="page3.html"> Page 3</option> <option value="page4.html"> Page 4</option> <option value="page5.html"> Page 5</option> <option value="page6.html"> Page 6</option> </select> <script language="JavaScript">  </script> </form>

In the function NewWindow, the variable idx is assigned the index number of the selected link.

This is passed to the second variable, dest, which now holds the actual link location.

This in turn is passed as a parameter to the window.open command.

With both examples, paste the relevant code into the BODY section of your page.

Using The Menu With Frames

To have the menu in one frame, and load the desired destination into another:

use the first example of code

change self.location.href to parent.FrameName.href

where FrameName = the name of the frame in your frameset where the destination page will load.

For example, if that frame is named Fred, change the code to:

onChange="parent.Fred.location.href ........"

Alternatively, you could use parent.frames[x].location.href, where:

x = the frames index number

The first frame in a frameset is frames[0].
The second frame is frames[1]. And so on.

For a simple 2-frame page, (as per the example at the bottom of this page):

the menu is in the left frame
the destination page loads into the right frame

Hence the second frame is frames[1].

So What Does It All Mean?

Let's look at the second example, since it's slightly easier to follow.

We have a form called form2, containing a section called select, and given the name list.

"List" has 6 options, which are its indices, starting at index[0].

If you choose the first option, Page 1, its Javascript name is options.index[0].

But since it is related to the entire page, its full name is document.forms2.list.options[0].

Similarly, if you select the final option, its full name is document.forms2.list.options[5].

The value of the first option is the actual URL, which is where we need to go.

So its full name is document.forms2.list.options[0].value.

Now the options[index] value is going to change, depending on which option is selected.

So we assign that to the variable, idx.

Therefore, if the first option is selected, idx = 0.

If option 2 is selected, idx = 1. And so on.

This value is passed on to the next variable, dest.

This is assigned the value of the selected index, which is the URL of the page or site.

So if you choose Option 1, its value is page1.html.

Hence, dest = page1.html.

Now we simply use the window.open command, and place the variable dest in the URL slot.

For the first example of code, instead of a window.open command, we use self.location.href.

This loads the required page into the same window or frame.

In both examples, a check is also made to ensure that the value of the URL does not equal "null".

This is the value assigned to the header "Destination" and the squiggly line beneath it.

If either of these are selected, nothing happens, since neither of these are URLs.

Try It Out

Same window

New window
Click here for frames example