Blog Post RSS ?

Blogs » JavaScript & CSS » Making a dropdown with DOM scripting
 

Making a dropdown with DOM scripting


  • Save to
    Del.icio.us

by Stuart Langridge

Aaron Gustafson is putting together a series of articles on how to make select elements stylable. In essence, what his work does is take the select out of the DOM and replace it with a ul, and then add script and CSS to make that ul work like a dropdown list. The advantage this gives is clear to everyone who’s ever complained about how selects aren’t stylable! The series has only just started, and there are a few concerns — the new element can’t be tabbed to, and doesn’t respond to keyboard events — but Aaron promises that part 2 will cover accessibility issues.

The script uses similar techniques to the Suckerfish dropdowns, applying “hover” and “selected” classes to various parts of the ul to provide hooks for styling (since IE doesn’t support :hover on things that aren’t links). This should be a useful technique to watch!

This post has 9 responses so far

  1. Thanks for the heads up Stuart, I wonder what browsers it’ll be compatible with *wonders off to read*

     
  2. He didn’t add a document.onclick=”hide the menu”, so if you click the drop down and then click somewhere else, it doesn’t disappear. Other than that, cool.

     
  3. Ick! It doesn’t even work in Opera. I hate Firefox only coders…

     
  4. Works fine here in Opera (7.51), Firefox and IE.

     
  5. Would be nice if it layered over the top of the form rather than taking up space in the page flow when its expanded.

     
  6. Looks great, but I would agree with mrsmiley. Also, keyboard support is a must. Should be able to tab to the control and select with keyboard.

     
  7. Very stylish! :D Would be nice to read about the accessibility issues.

     
  8. Interesting, I published a similar piece some time ago:
    http://icant.co.uk/forreview/tamingselect/

     
  9. Your article is very informative and helped me further.

    Thanks, David

     

Sponsored Links

Leave a response

You are not logged in, log in with your SitePoint Forum username and password.

-OR- Post Anonymously

* Make sure any code samples are escaped (i.e. ‘<b>’ becomes ‘&lt;b&gt;’).

If not logged in, your comments will be placed in a moderation queue. This means your comment may not appear until one of our moderators approves it.

SitePoint Marketplace

Buy and sell Websites, templates, domain names, hosting, graphics and more.

Logo Design, Web page Design and more!

99designs

  • Custom logo designs created ‘just for you’.
  • Pick the design you like best.
  • Only pay if you’re satisfied with the result.

Want More Traffic?

Get up to five quotes from qualified SEO specialists, with no obligation!

Get A Free SEO Quote Now!