JavaScript: Drop-Menu
Using a Web Form Select Field (by Bill Trefzger)
[MODIFIED for Accessibility]
The purpose of this JavaScript is to provide a list of links on a page without adding unnecessary clutter to the design. The reasons for using JavaScript, rather than a server side script (CGI), are:
- to have a server independent form function for quick links (permitting its use anywhere),
- to provide a quicker response than might be possible with a server call, and
- to have a tool that is both functional and flexible in its application using practically any browser.
The outlined changes to Bill Trefzger's Java Menu (a JavaScript menu) are defined below and in the source code of this document. (Original site no longer available: http://www.webmastercandy.com/free-javascripts.shtml) These changes to the author's script would provide the same content to all, even if the visitor does not have JavaScript support. Either of the two modifications listed below should make the JavaScript an accessible implementation.
You should note, the JavaScript as presented in the author's example is not accessible. While it is functional in most browsers, it does not provide all of the items needed to be accessible.
The code source of the original example has also been heavily modified here for the following reasons:
- source code is now fully defined to improve rendering and HTML4 support (as well as backward compatibility),
- source code is smaller than the original to reduce download times, and
- the revision permits multiple instances of the same script in one page.
Working Examples
Example 1: Version with NoScript
In Example 1 the first item in the drop list is the main topic associated with this list's links. This list's first item, and the NOSCRIPT, are linked to a page that provides these same links within the body of the page. The NOSCRIPT is required here should the JavaScript not be supported or executed by the browser, providing the same content to all visitors. (view simplified code source for example 1)
Example 2: Version without NoScript
Melvin Waller Jr, Web Sites |
Example 2 links the main page within the document, preceding the drop list, and the drop list is used as a supplement to the main link. In this case the NOSCRIPT is not necessary, as the first link is always available to the visitor. With this implementation the first item in the list does not need to be linked. However, the first item in the drop list should specify the subject (as a courtesy to the visually impaired), and that an item should be selected from the list. (view simplified code source for example 2)
JavaScript Usage Notes
List Designator:
For the multiple instance support of the script you will notice in the source the following items: name="jsmenu#", name="jsm#", and onclick="go(#)". The pound symbol (#) in these cases would be substituted with this drop list's number.
Character Escaping:
You should note that the JavaScript is using the single quote, or apostrophe, (') as the text string delimiter. If the content between these apostrophes require the use of an apostrophe, then it should be 'escaped' in JavaScript so that the character is not interpreted by the code. Escaping, or ignoring, a character in JavaScript is accomplished by preceding the character with a back-slash. To ignore the apostrophe character and treat it as text only you would use (\'), not including the parenthesis.
On the Main Subject Page
The links in the drop list should be repeated on the associated main page, the first item of the drop list. If the links are not repeated in that associated main page, then the drop list is presenting content not accessible to all. (Providing content not accessible to all is providing inaccessible content, even if it is considered supplemental.)
On the "Melvin Waller Jr, Web Sites" page I would expect to find:
Melvin Waller Jr, Web Sites |
