• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 6. Navigation > Adding a Jump Menu

Adding a Jump Menu

“Quick and dirty” is the name of the game with jump menus, allowing you to quickly set up a drop-down menu using the form’s select menu. To some Web designers this is a hack—using form code for purposes for which it was never intended. Nevertheless these types of menus work and allow you to put multiple links into a small area.

To add a jump menu:


Create and save the file jumpLibrary.js (Code 6.16). Step 2 applies to this file.

Code 6.16. The external JavaScript file jumpLibrary.js provides the code that makes the jump menu work.

function jumpTo(evt) { 
     evt = (evt) ? evt : ((event ? event : null)); 
     if (evt) {
        var object = (evt.target) ? evt.target :
        → ((evt.srcElement) ? evt.srcElement :
        → null); 
        if (object && object.tagName.toLower
        → Case() == 'select' && object.value) { 
           location.href = object.value;

function jumpTo(evt) {...}

Add the function jumpTo() to the file. This function looks at the value associated with the form element that triggered the function (which should be either a relative or absolute URL) and uses that to refresh the browser to the new Web page.


Create and save the file jumpMenu.js (Code 6.17). This file is used to write the code used for the jump menu into each page that needs it (see “Adding External Content with JavaScript” in Chapter 4). Steps 4-7 apply to this file.

Code 6.17. The HTML code that creates the menu is in the external JavaScript file jumpMenu.js so that it can be shared by different files easily.

var writeMenu = ''; 
writeMenu += '<form id="jumpMenu"
→ name="jumpMenu">' 
writeMenu += '<select name="selectName"
→ size="1" onchange="jumpTo(event)">' 
writeMenu += '<option selected="selected">
→ Table of Contents</option>' 
writeMenu += '<option value="index.html">
→ Chapter 1</option>' 
writeMenu += '<option value="chapter2.html">
→ Chapter 2</option>' 
writeMenu += '<option value="chapter3.html">
→ Chapter 3</option>' 
writeMenu += '</select>' 
writeMenu += '</form>' 

var writeMenu = '';

Add the variable writeMenu to the file. This variable will be used to store all of the HTML code used to write the menu.

writeMenu += '<form id="jumpMenu"
→ name="jumpMenu" onchange=
→ "jumpTo(event)">'

Add the <form> tag to the writeMenu variable using the name/ID jumpMenu and an onchange event handler to trigger the jumpTo() function.

writeMenu += '<option value=
→ "index.html">Chapter 1</option>'

Add form options for each of the menu options you want in the jump menu, including the URL as the value for each option. The URL can be either relative or absolute.


Add a document.write() to add the code collected in the writeMenu function to the page. This will write the HTML so that the browser treats it as a part of the Web page.


Create and save a file called index.html (Code 6.18). You can place the jump menu into any HTML page you desire, so consider this a template for other pages that need the jump menu. Steps 9 and 10 apply to this file.

Code 6.18. Link to the jumpLibrary.js and jumpMenu.js files to put the jump menu into any Web page, such as index.html, shown here.

→ Transitional//EN" "http://www.w3.org/TR/
→ xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" xmlns="http://www.w3.org/
→ 1999/xhtml"> 
        <meta http-equiv="content-type"
        → content="text/html;charset=utf-8" /> 
        <title>DHTML &amp; CSS Advanced |
        → Adding a Jump Menu | Page 1</title>
        <script src="jumpLibrary.js" language="javascript" type="text/javascript"></script>
        <script src="jumpMenu.js" language="javascript" type="text/javascript"></script>
        <br />
        <br /> 
        <h1>CHAPTER I</h1> 
        <p><b>Looking-Glass house</b></p> 
        <p><img src="Alice_1_1.jpg" alt="Alice
        → and the White Knight" width="146"
        → height="216" align="right" hspace="5"
        → vspace="5"/>One thing was certain,
        → that the WHITE kitten had had nothing
        → to do with it...</p> 



In the head of your document, add a <script> tag with the source pointing to jumpLibrary.js.


In the body of your Web page, at the position where you want your menu to appear, add a <script> tag with the source pointing to jumpMenu.js.

The jump menu will be placed in that position when the page is loaded into a browser (Figure 6.40). When the visitor selects an option from the menu (Figure 6.41) the browser will load the selected page (Figure 6.42).

Figure 6.40. The jump menu is a compact way to provide quick navigation for the visitor.

Figure 6.41. The visitor clicks the menu to see and choose their options.

Figure 6.42. After the visitor selects the menu option, the new page loads.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint