Jquery drop down menus can be used in a number of ways to improve the user experience when using the site. Here are a number of ways in which JQuery menus can really make a difference with minimal effort. Some of these examples are Jquery dropdown plugins which can simply be installed and used without writing too much code. Most plugins are fully customisable to suit your website and all require the Jquery installation package to work. You can also use the drop down boxes to auto populate results from your database using AJAX, this is to be covered in another article.

Select2 2.0

Update 05-06-2012: Select2 2.0 is by far the best plugin to use for jQuery drop down boxes and select replacements. With support for multi-selects, tags, lists, different datasets, ajax data loading, infinite scrolling etc…

1. The Facebook Complete

Give your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.

facebook drop down box

Source: http://www.emposha.com/javascript/jquery/jquerymultiselect.html

2. The iPhone Style Drop Down Menu

“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

the iphone drop down

Source: http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu

3. Fast Results Combo Box

This elegant combo box predicts options and shows then as your typing. It has some issues with IE but other than that works like a treat.


Source: http://plugins.jquery.com/project/DDComboBox

4. Dynamic Chained Combo Boxes

These combo boxes are dynamic! This means they load based on a choices selected in the other drop downs. This method is simple but very effective and can be used with AJAX calls to populate data in a database. For example, selecting a country would load the states and cities for that country. Live demo of dynamic combo box

chained combo box


5. Listbox with Attached Slider

This listbox is attached to a slider which represents the value selected in the drop down box. The value can be selected using both the drop down and the slider.

listbox slider

Tags: drop down boxes, drop down menus, facebook complete, iphone drop down menu, jQuery, jquery drop down combo box
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • http://www.potenzmittel-apo.com/natuerliche-potenzmittel/alternative-potenzmittel.html viagra online

    Hello!, Very interest angle, we were talking about the same thing at work and found your site very stimulating. So felt compelled to com?ment a little thank you for all your effort. Please keep up the great work your doing!

  • http://thisistraffic.co.uk/ web design birmingham

    Thanks for that awesome posting. It saved MUCH time :-)

  • http://starjerk.com/ celebrity gossip

    This is a superb post jQuery4u .
    Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.

  • celebrity gossip

    This is a superb post jQuery4u .
    Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.

  • http://www.dhtml-menu-builder.com/ canndy girl

    3. Great post. You seem to have a good understanding that how to create a professional drop down menu. When I entering your blog, I felt this. Come on and keep writing your blog will be more attractive. To Your Success!

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.