Navigation Menu

Last updated: 08.05.2002

Choose an entry from this menu to go to the relevant page

The navigation menu above works by using the onChange function of the SELECT object to tell the window to load a new document. The URLs of the documents to jump to are given by the VALUE of the various OPTION tags contained in the SELECT.

This kind of navigation tool has the advantage that it takes up less space than a conventional menu made of text or image links, or an image map. Unfortunately, it also has some disadvantages.

One problem is that the navigation menu will take on the appearance of standard menus on whatever platform your visitors are using, which is likely to clash with whatever look and feel you have chosen for your pages on at least some platforms.

A more serious disadvantage is that this technique depends on JavaScript. As such, if you use it as the only method of navigation on your site, you will close your pages to users who have disabled JavaScript on their browser, as well as those who don't have JavaScript-capable browsers. As more and more sites use JavaScript to assault their visitors with pop-up dialogs, scrolling tickers, extra windows, layers and other assorted irritations, more and more Web users are likely to disable JavaScript so it is unwise to rely on it as the only way for people to get around your site.

A third disadvantage is that embedding your links in a menu in this way will also stop Web-indexing robots dead in their tracks (which may or may not be a good thing, depending on your point of view).

It would be possible, with a little effort, to make this system work for clients who don't have or use JavaScript. To do this, you will need to do three things.

  1. Write a CGI script that reads a URL passed to it as the value of the form variable LinkMenu (if you follow the form structure above), converts the URL to an absolute URL if necessary (using the HTTP_REFERER environment variable as the base when translating the relative URL to an absolute one), then prints the string 'Location:' followed by the converted URL and two line-feeds.
  2. Set the ACTION attribute of the form above to point to your CGI script, and set the METHOD attribute to GET (or to POST, according to taste).
  3. Add a submit button to the form, hidden from JavaScript users within a <NOSCRIPT> container.

Non-JavaScript users could then choose an item from the menu and click the submit button to fire up the CGI script. The CGI script will read the location, and issue a redirect which will send your browser to the desired place.

This is a very poor solution, for several reasons. First, the user has to do more work: they have to click on the menu, drag to the item they want, then move to the submit button and click that. From the user interface point of view, this is distinctly unattractive. Compare this with the simplicity of clicking once on an image or a piece of text. Second, the browser has to do more work. It has to send the request to the server, wait for the response, and then send another request to actually get the page. Third, the server has to do more work, because each time the user wants to go to another page, it has to run a script (which means that it typically has to launch Perl or a shell, which can take several seconds and significant CPU and memory resources). In short, this technique is slow, ugly and horribly inefficient and there's no real justification for using it.

The JavaScript navigation menu itself might possibly make sense if you can guarantee that all your users will be using JavaScript-capable and -enabled browsers. It might be of use in a 'JavaScript-only' version of your site (although the idea of maintaining two parallel document trees, one for users with JavaScript and another for those without, is not attractive). It could also be useful on an intranet where you may be able to guarantee that users are using a particular browser. In the context of the wider Web, it's little more than a curiosity and probably best left alone.

[raingod:resources:javascript] -- [previous][up][next][links][home]