topic title

I present this technique with an important warning. Using a menu like this makes the links unusable by anyone using a keyboard to browse; in other words, to those who cannot use a mouse for whatever reason. You must supply other means of reaching the content if using this method: please do read the page on navigation and accessibility for other important issues here.

The technique uses a form, which we looked at in lesson 9), and also some JavaScript (lesson 8). Mind you, you can also just use the code without necessarily having to understand what it does. In actual fact it's pretty simple.

The code for that menu is as follows. Note that the "onChange" JavaScript event in the long second tag should not be broken between two lines like this but should be entered in a continuous string of characters. I had to break it below to make this page fit on the screen, but ensure you glue the line back together in your code.

<forM ACTION="">
  <SELECT name="jumpto"
     onChange='window.location.href=this.form.jumpto.options
         [this.form.jumpto.selectedIndex].value'>
     <option selected>Link Menu...</option>
     <option value="subj_textbars.html">Text-based menu bars</option>
     <option value="subj_imagebars.html">Image-based menu bars</option>
     <option value="subj_buttonlinks.html">Buttons as links</option>
     <option value="subj_sitemaps.html">Site maps</option>
     <option value="subj_newwindows.html">Opening new windows</option>
     <option value="subj_navigaccess.html">Navigation and accessibility</option>
     <option value="index_subject.html#9">Return to the Subject Index</option>
</SELECT>
</forM>

A few observations, which may be obvious but I'll make them anyway - first note that you can use this for any type of link: internal, external, anchor or whatever. Secondly, note that you can change the link showing in the "window" when the menu is first seen by moving the "selected" attribute in that list of <OPTION> tags. The first, "dummy" option does not have to be there either, but is easy to remove (or indeed put back in). Make sure your readers know that the menu is a list of links. As links are not often presented like this they may not realise, so be very clear about it.

Quite a few sites these days are starting to use drop-down menus to present links, but these are usually programmed with Java (a fully-fledged Web programming language of which JavaScript is a relative). The disadvantages of Java are that, first, it's difficult, and second, not all browsers are set up to view it. (Once again I urge you to read the page on navigation and accessibility.) This method isn't so sophisticated, and its appearance can't be tailored so easily. But it's pretty simple, and even quite antiquated browsers should be able to cope with it.

Back to the top

Back to the menu for lesson 10