Simple DropDowns for All

I was looking at Youtube the other and was noticing they use a ton of dropdown menus.

Examples of dropdown menus found at YouTube

When I looked through YouTube’s code, I had a hard time finding out how they were generating these. It turned out they had a pretty elaborate script which relied on several other youtube resources. So I decided to write a standalone version that looks just as good, performs even better, and has a tiny footprint. Here’s what I came up with:

Example Dropdown Menu: Example Dropdown Menu

Doesn’t it look great? And it’s incredibly simple to use.

How To Use

1. First, download simpledropdown.js script.
2. Next, include the following line of code in your website:

<script type="text/javascript" src="simpledropdowns.js"></script>

3. Create span elements with the class set to "dropdown" and place the text you want to fill the dropdown menu
with in the title attribute, like so:

<span class="dropdown" title="Menu Text">Drop Down</span>

That simple code will create this menu: Drop Down.

To create something fancier like the menu “Example Dropdown Menu” above, or to learn more about how the dropdown menu can be used in your website, check out the SimpleDropDowns project home page here. The script also has a Google Code project page here. Enjoy!

Tags: dropdown, google code, javascript, website, youtube

This entry was posted on Monday, January 5th, 2009 under these categories: Web Development.
You can follow any comments to this entry through the Comments RSS feed.
You can leave a comment, or trackback from your own site.