• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / JavaScript / A Simple JavaScript Drop-down Menu

A Simple JavaScript Drop-down Menu

17 January 1998 / Leave a Comment

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.)

Filed Under: JavaScript Tagged With: pull-down menu, site nav

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits