Update! Simple DropDowns for All

This is an update to my previous post on this project, entitled Simple DropDowns for All.

Simple DropDowns (SDD, for short) is now out of beta (version 0.4) with a new Version 1.0 release.

Check out this screenshot of the new documentation page:

There are several new features in the new release including the much requested onmouseover (as opposed to onclick) activation of the dropdowns, and better event handling for hiding the dropdowns after use. Also, the documentation and usage has been simplified so that the title element now only used to point to a hidden div containing the dropdown menu’s contents.

The new script can be downloaded here:simpledropdowns.js (or minimized: simpledropdowns-min.js).

The homepage for the project is here: http://adam_s.scripts.mit.edu/dropdown/.

And the google code project homepage is here: http://code.google.com/p/dropdowns/.

Tags: design, dropdown, google code, javascript, website
Posted in Web Development | No Comments »

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
Posted in Web Development | 3 Comments »