5 Demos of Pretty dropdowns by jQuery plug-in (pretty-dropdowns)

The pretty-dropdowns plug-in

Turn the ordinary HTML select dropdowns into the beautiful menus by using the pretty-dropdowns jQuery plug-in. It comes up with many features that you may customize as per the need of your theme of forms.

The features include:

  • You may add customized HTML to the menu items like icons, thumbnails etc.
  • Create menus with single or for more multiple selections
  • Add tooltips to the items (options) or option groups
  • And more
Demo 1 Demo 2 Demo 3
Developer’s page Download plug-in

Setting up pretty-dropdowns plug-in in your project

Include the dependency files in the <head> section and before the </body> closing tag for better performance:

CSS in the <head> section:

<link rel=”stylesheet” href=”css/prettydropdowns/prettydropdowns.css”>

jQuery and plugin JS file before the </body> tag:

<script src=”//code.jquery.com/jquery-2.2.4.min.js”></script>

<script src=”js/prettydropdowns/jquery.prettydropdowns.js”></script>

The markup

The markup is just the HTML select dropdown with options or optional groups. For example:

 

The script

The class is referred in the jQuery code to initiate the plug-in:

 

Keep reading the following section for demos and complete code where I used different options provided by the plug-in.

A simple pretty dropdown demo

Using the same select dropdown code as in above section and see how a dropdown looks after associating the select with plug-in:

jQuery pretty dropdown

See online demo and code

The complete code:

 

A demo of dropdown with tooltips

Just add the title attribute in options where you want to display the tooltips. Using the same code as in above demo except I have added titles in the options:

jQuery dropdown tooltip

See online demo and code

The markup:

 

A demo with prefix and suffix with options

You may also add the prefix like icons and suffix with the options in the dropdown as using this pretty-dropdown plug-in.

jQuery dropdown icons

See online demo and code

You can see in the demo, with each option an icon is used (glyph icons) as prefix while small text as the suffix is also used. This is done by using the data-prefix and data-suffix attributes in the options tag:

 

An example of multiple selections

This is how cool it looks as using the multiple attribute in the select tag.

jQuery dropdown multiple

See online demo and code

Only the multiple attribute is added in first example’s code. Also, you might notice the tooltips showing the selected options.

An option groups demo

See the option group demo by clicking the link below. The multiple attribute is also used for this:

jQuery-dropdown option groups

See online demo and code

The complete code of the example:

You may learn more about this nice plug-in on the developer’s page.