How to make dropdown menu like "delicious" and "google"?

Question

I want to make a dropdown menu like delicious has at this http://delicious.com/search?context=all&p=sql&lc=1 page. In this page click the arrow which is with "Search" button. On click it displays a drop down menu, I want the same menu style but on my page I am having a link, what I want with that link a simple small icon will be displayed and on click of the link or that menu image, a dropdown menu will open.

Google has also done the same thing, http://www.google.co.in/firefox?client=firefox-a&rls=org.mozilla:en-US:official click on the "more" link in the top menu displayed.

I want to use minimal javascript, I prefer JQUERY.

Solution 1

There is a lot of JQuery plugins that create a drop down list (Menu) like delicious.
you can use:

1. JdMenu
2. Drop down menu with jquery
3. Free CSS Drop-Down Menu Framework

Solution 2

I always recommend Son of Suckerfish for menus like this. CSS only, so it works even for users without scripting, and is extremely lightweight and fast for it.

Solution 3

here is a tutorial on creating the top navigational menu found in google

http://blog.geotitles.com/2011/09/creating-the-new-top-black-bar-found-in-google-and-all-its-products/

Solution 4

You may find this jQuery UI plugin useful - http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

It's built with progressive enhancement in mind.

View more solutions

Comments

[djmzfKnm]

The solution must be cross-browser!