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:
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:
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:
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.
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:
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:
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.