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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 in the jQuery code to initiate the plug-in:
|
1 2 3 4 5 6 7 8 9 |
<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 above section and see how a dropdown looks after associating the select with plug-in:
See online demo and code
The complete code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!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 options where you want to display the tooltips. Using the same code as in above demo except I have added titles in the options:
See online demo and code
The markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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 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.
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:
|
1 2 3 |
<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 as using the multiple attribute in the select tag.
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:
See online demo and code
The complete code of the example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!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.