Creating Accessible “Quick Link” Menus

by Curtiss   |   last updated March 28, 2008   |   Javascript Tutorials · programming ·

As many of you are aware, it is rather difficult to create an accessible “quick link” menu (sometimes also called “jump menus”) because most of them require javascript.

For those of you that don’t know what a quick link menu is, it’s generally a dropdown menu, made from a typical form “select” element. Then, when a user chooses one of the options within that select element, the page automatically redirects to the location associated with that option.

For instance, in the top corner of all HTMLCenter pages, there is a quick link menu called “Top Links”.

For a lot of users, these types of menus are extremely useful. Designers generally use quick link menus for one of two purposes: a) to provide a quick, easily locatable list of the top content on their Web site or b) to provide a list of the headers on a long page, allowing the users to quickly “jump” to the appropriate section of the page.

The problem, though, as I mentioned at the beginning of this post, is that they all require javascript in order to work properly. That’s great for the users that have javascript enabled, but it really can cause problems for those that don’t have javascript.

I have come up with a solution to that problem, though. With the solution described below, the “quick link” menu is initially written as an unordered list. Then, I use javascript to convert it to a standard “jump menu”. That way, if the user doesn’t have javascript within his/her browser, they get a nicely formatted unordered list of the links instead.

The code looks something like this:

<script type="text/javascript" language="javascript">

function jumpto(what) {

    /* Jump to the location that was set as the value of our menu item */

    window.location.href = what.options[what.selectedIndex].value;

}

</script>

<ul id="quicklinks">

    <li><a href="#link1">Jump Link 1</a></li>

    <li><a href="#link2">Jump Link 2</a></li>

    <li><a href="#link3">Jump Link 3</a></li>

</ul>

<script type="text/javascript" language="javascript">

/* store our quicklinks unordered list as a javascript object variable */

var what = document.getElementById('quicklinks');

/* create a new select element and store it in a javascript object variable */

var where = document.createElement('select');

/* create our first option, which will not have a value because it's just supposed to be a placeholder */

var why = document.createElement('option');

why.value = '';

why.appendChild(document.createTextNode('-- Quick Links --'));

where.appendChild(why);/* iterate through all of the DOM nodes inside of our quicklinks unordered list */

for(var who in what.childNodes) {

    /* create a new option object within the DOM for our menu item */

    why = document.createElement('option');

    /* iterate through the child nodes of the list item to find our link */

    if(what.childNodes[who].childNodes) {

        for(var myref in what.childNodes[who].childNodes) {

            if(what.childNodes[who].childNodes[myref].href) {

                /* assign the href property of our original link to the value property of our new select option */

                why.value = what.childNodes[who].childNodes[myref].href;

                /* assign the text of our original link as the text of our select option */

                why.appendChild(document.createTextNode(what.childNodes[who].childNodes[myref].innerHTML));

                /* add the new option to the select element we created above */

                where.appendChild(why);

            }

        }

    }

}

/* assign our quicklinks ID to the new select element */

where.id = 'quicklinks';

/* assign the necessary onchange event handler to our new select element */

where.onchange = function changed() {jumpto(where.id)};

/* remove the unordered list we initially created */

document.getElementById('content').removeChild(what);

/* replace that unordered list with our new select element */

document.getElementById('content').appendChild(where)

</script>

I have tried to comment the code well enough for people to understand what I’ve done. Basically, I’ve done the following things:

1. Created a javascript function to assign to the onchange event handler of our “jump menu”. This way, when the value of our “jump menu” changes, the browser will be automatically redirected to the selected value of our “jump menu”.
2. Created an unordered list with all of our menu items. Be aware, though, that if you add spaces or carriage returns in the code of that unordered list, it can take a few fractions of a second longer to process, as some browsers actually treat those spaces and carriage returns as separate DOM nodes. The javascript code described in step 3 below should be written properly to ignore those nodes, but it still may hinder performance slightly (though, because it’s javascript, it would probably be a negligible slowdown).
3. Created the javascript that dynamically parses the unordered list I described in the previous step. It then creates our jump menu based on the data within that unordered list.
   • The unordered list itself is converted into a “select” element
   • The list items within that list are converted to “option” elements
   • The links within each of those list items are then turned into the “value” attributes of our “option” elements and the text from those links is used as the text of our “option” elements.

I hope that helps some people that have considered adding “jump menus” or “quick link” menus to their Web sites, but have always shied away due to the javascript requirements. Like I said, with this script, you simply build your menu as an unordered list, and then use javascript (if available) to convert that unordered list into a select element, or a classic “jump menu”.

Good luck.