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 code looks something like this:
I have tried to comment the code well enough for people to understand what I’ve done. Basically, I’ve done the following things:
- 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.