Pretty Dropdowns by jQuery Plug-in (pretty-dropdowns)

Turn the ordinary HTML select dropdowns into 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
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:

<select id="expertise" name="expertise" class="pretty">

  <option>JavaScript</option>

  <option>HTML</option>

  <option>CSS</option>

  <option>PHP</option>

  <option>MySQL</option>

</select>

The script

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

<script>

$(document).ready(function() {

  $('.pretty').prettyDropdown();

});

</script>

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 the above section and see how a dropdown looks after associating the select with the plug-in:

A dropdown demo by using jQuery pretty-dropdowns plug-in

The complete code:

<!DOCTYPE html>

<html>

<head>


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

</head>

</head>

<body>

<label for="size">Pretty dropdown demo:</label><br>

<select id="expertise" name="expertise" class="pretty-dropdown-demo">

  <option>JavaScript</option>

  <option>HTML</option>

  <option>CSS</option>

  <option>PHP</option>

  <option>MySQL</option>

</select>

 

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

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

 

<script>

$(document).ready(function() {

  $('.pretty-dropdown-demo').prettyDropdown();

});

</script>

</body>

</html>

A demo of dropdown with tooltips

Just add the title attribute in the options where you want to display the tooltips.

Using the same code as in the above demo except I have added titles in the options:

jQuery dropdown tooltip

The markup:

<select id="expertise" name="expertise" class="pretty-dropdown-demo">

  <option title="JavaScript is cool">JavaScript</option>

  <option title="Hypertext Markup Language">HTML</option>

  <option title="Casecade Style Sheets">CSS</option>

  <option>PHP</option>

  <option>MySQL</option>

</select>

A demo with prefixes and suffixes with options

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

jQuery dropdown icons

With each option, an icon is used (glyph icons) as a 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:

  <option data-prefix="<span aria-hidden='true' class='glyphicon glyphicon-eye-open'></span>" data-suffix="<small> petrification</small>">Eye of Medusa</option>

  <option data-prefix="<span aria-hidden='true' class='glyphicon glyphicon-fire'></span>" data-suffix="<small> area damage</small>">Rain of Fire</option>

An example of multiple selections

This is how cool it looks to use the multiple attributes in the select tag:

jQuery dropdown multiple

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

An option groups demo

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

An option groups demo
by using the jQuery pretty-dropdowns

Complete code:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/prettydropdowns/prettydropdowns.css">
</head>

</head>

<body>

<label for="size">Pretty dropdown demo:</label><br>

<select id="expertise" name="expertise" title="What are your expertise?" class="pretty-dropdown-demo" multiple>

  <optgroup label="Web">

    <option>HTML</option>

    <option>CSS</option>

    <option>PHP</option>

    <option>JavaScript</option>

  </optgroup>

  <optgroup label="Database">

    <option>MySQL Database</option>

    <option>Oracle</option>

    <option>MS SQL Server</option>

  </optgroup>

</select>

 

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

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

 

<script>

$(document).ready(function() {

  $('.pretty-dropdown-demo').prettyDropdown();

});

</script>

</body>

</html>

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