A Simple JavaScript Drop-down Menu

In this tutorial we’re going to design a simple menu system using JavaScript and an HTML form containing a SELECT list.

A menu using JavaScript and forms

In this tutorial you’ll add a drop-down menu to your page. Then, when you pick another from the menu, it’ll take you straight to that page. Cool, huh? Now this is how to do it…

First, we make an array containing the URLs of all the pages in our drop-down menu. An array is just a list of objects – in this case, URLs. To make this easier we write a function to build the array:

function buildArray()
{
  var a = buildArray.arguments;

  for ( var i=0; i<a.length; i++ )
  {
    this[i] = a[i];
  }

  this.length = a.length;
}

Then we call that function, passing it the URLs we want in the array:

var urls1 = new buildArray("",
"about.html",
"new.html",
"portfolio.html",
"guests.html",
"links.html",
"mailto:you@wherever.whatever?subject=the site");

We’re naming our array "urls1", so that if we wanted more than one drop-down menu in the page, we could easily add more ("urls2", "urls3" etc). This is also catered for in the next function, go(), which loads the new pages into the window when the user selects them from the menu:

Go, go, go! Let’s see some action…

function go ( which, num, win )
{
  var n = which.selectedIndex;

  if ( n != 0 )
  {
    var url = eval ( "urls" + num + "[n]" )
    if ( win )
    {
      openWindow ( url );
    }
    else
    {
      location.href = url;
    }
  }
}

The go() function takes three arguments. The first one, which, is the object whose event handler called the function – in this case, the drop-down menu. This is passed so that the function knows where to find the menu object! The second argument, num, refers to the array of URLs we mentioned above; in this case there’s only one array, urls1, so we’ll pass the value 1 to the function. The third argument, win, is a boolean value (either true or false) – true means that a new window should be created for the selected page, while false means that the selected page should be opened in the current window.

Now the function itself should be fairly self-explanatory. The first line, var n = which.selectedIndex, gets the value of the selectedIndex property from the object which (our drop down menu) – in other words, n now holds the position of the selected item in the menu (a number between 1 and 7). n is then used to find the URL to display, by looking it up in our urls1 array. Finally the URL is displayed, either in a new window (if win was true) or in the same window.

Speaking of new windows, we also need to include that openWindow() function in our page. This is a simple function that opens a new window containing the page at the URL passed to it:

function openWindow ( url )
{
  popupWin = window.open ( url, 'remote', 'width=500,height=350' );
}

Change the width and height values to suit your taste, or remove them altogether to let the browser decide the width and height.

For more on opening windows, see our Opening windows with JavaScript tutorial.

The HTML bit

The last step is to call the go() function from the drop-down menu itself. Here is the HTML for the menu:

<form name="form1">

<select name="menu1" onchange="go(this, 1, false)">
<option>f i l m s t a r 
<option>about
<option>what's new?
<option>portfolio
<option>guests
<option>links
<option>m a i l  u s
</select>

</form>

The select element generates a drop-down menu. As you can see, this element has an event handler onchange, which is called when the user picks an item from the menu. We use this handler to call our function go() with the reference to the drop-down menu object (this), the URL array we’re using (there’s only one, so 1) and whether we want the links to open in a new window (false, or no)

That’s all there is to it! You can take the above code and change the menu text and URLs to make menus for your own sites. It’s a great way to make a menu if screen real-estate is at a premium. Plus it teaches you a bit about using JavaScript with forms!

(You can find out more about JavaScript event handlers in our tutorial, Events and event handlers.)