Home : Articles : A Simple JavaScript Drop-down Menu

A Simple JavaScript Drop-down Menu

Tutorial by Matt Doyle. Level: Intermediate. Published on 1 January 1998 in JavaScript.

Shows you how to use JavaScript and a SELECT list to create a simple drop-down navigation menu for your website.

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

To see this kind of menu in action, take a look at a page from one of our PageKits, filmstar. In the top left of the window you'll see a drop-down menu. When you pick a page from the menu, it'll take you straight to that page. Cool, huh? Now this is how we did 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.)

Responses to this article

There are no repsonses yet.

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute or two. Sign up now.

Keep in touch

Subscribe to our feed or follow us on Twitter for news of our latest articles and other fun stuff.

Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!

If you need help with a Web-building issue, check out our online Webmaster Forums, where you can get assistance from members of Elated and other webmasters.