One of the more common ways to interact with a Web site is via a select element. Commonly referred to as a “drop-down,” a select element is a multiple-choice form element. Select elements are an essential part of many forms and are commonly used to select your state or province, delivery method, and other choices when completing a form. Many years ago, someone got the bright idea that select element, when coupled with a small amount of JavaScript, could also be used as site navigation. While typically not used for main navigation, this method is now commonly used as navigation for displaying dynamic data on a given page. And for the average user, it works just fine. But if you look deeper, there are inherent flaws in using a select element in this manner. Most select elements which are used as navigation require JavaScript in order to function. In addition, the links themselves are stored as form values rather than hyperlinks. Thus select elements used as navigation are neither accessible nor search engine-friendly. Enter the pseudo-select element.

Several years ago, a particular design on which I was working called for the use of a select element as a tertiary navigation list. Knowing that content on pages linked from this select element would not likely be indexed by search engines, I began toying with the idea of using CSS to make a list of traditional hyperlinks look like a select element. The initial method that I used, while crude, worked brilliantly. The links looked like a select element but worked like a list of hyperlinks. My code evolved over time and eventually became known as the pseudo-select element.

View a sample of a pseudo-select element. (Please note: the select element does not link to any pages.)

I am now on version 3 of my pseudo-select element. The current version is semantic, is progressively enhanced via JavaScript, uses separated code, and works on all major browsers. In addition to the HTML, three files are required for its use: an external CSS files, an external JavaScript file, and a single GIF image.

In order to use a pseudo-select element on your own site, you first need to implment the HTML. To do so, just create a list of any number of links which you want to appear in your pseudo-select element, as the example below shows:

<div class="pseudo-select">
     <span>Select</span>
     <ul>
          <li><a href="link1">Hyperlink (Option) 1</a></li>
          <li><a href="link2">Hyperlink (Option) 2</a></li>
          <li><a href="link3">Hyperlink (Option) 3</a></li>
          <li><a href="link4">Hyperlink (Option) 4</a></li>
          <li><a href="link5">Hyperlink (Option) 5</a></li>
     </ul>
</div>

Don’t forget to add the class of “pseudo-select” to your parent <div>.

Next, make sure you’ve included the external files. You must link to the pseudo-select CSS file in the head of your document, as well as the pseudo-select JavaScript file. Finally, add the pseudo-select-arrow.gif image to the images/indicators folder.

To make everything work, you need only to use your favorite event loader to run the initPseudoSelect() function when the page loads. In the case of the example that I have provided, I have used the excellent jQuery ready event.

Version 3 of the pseudo-select element has been tested on Internet Explorer 6 and 7, Firefox 1.5, 2 and 3, Opera 9, Safari 3, and Chrome (all on a Windows PC). If JavaScript is not present, the pseudo-select is simply rendered as an HTML list of hyperlinks. The CSS can be easily edited as needed to change the size of the element’s default width as well as the height of the drop-down menu portion.

And there you have it. An accessible, search engine-friendly select element. Or rather, a pseudo-select element.

Comments