Taming the Select - DOM to the rescue
(Page 2 of 4 )
What we can style nicely are JavaScript drop-downs. We can have a link that shows and hides a list of links in an accessible manner (off-left). The only problem is that we make ourselves dependent on JavaScript, something we must avoid at all costs.
By using DOM JavaScript we can replace the original SELECT with a style-able and accessible drop-down, one that only appears if the browser can handle it.
This script does that. It grabs every SELECT in the document with the class turnintodropdown and replaces it with a styleable CSS dropdown. In essence, it replaces the SELECT with a new DIV. This DIV contains a hidden field has the same name and id as the original SELECT. Furthermore the script creates a list of links that get populated from the OPTION data and a link that shows and hides this list when being clicked on. Clicking one of the links in the list will populate the hidden field with the current value, set it as the text of the "hide and show" link and hide the list.
To see it in action, check the example page.
The style of the drop-down is defined in some classes that get applied via the script as needed:
- dropcontainer - Defines the parent element of the newly created drop-down parent (a DIV). This needs to be set to "position:relative" to position the drop-down.
- trigger - Defines the look of the link when then drop-down is hidden.
- activetrigger - Defines the look of the link when then drop-down is shown.
- dropdownhidden - Defines the look of the generated drop-down (a UL) when it is hidden.
- dropdownvisible - Defines the look of the generated drop-down when it is hidden.
Check the CSS embedded in the example page for one possible solution.
You can change the class names in the variable section at the top of the script.
Next: But wait, there is more! >>
More Style Sheets Articles
More By Chris Heilmann
/ 16 
