Easydropdown.js – Style your Dropdown Menus using jQuery

Dropdowns…! What comes to the mind first..! The boring HTML dropdowns and I think they are very easy to create just by using the <SELECT> command along with the <OPTION> tags. Have you ever thought of styling them? Nopes.. I am not talking about styling using CSS on your drop-down menu items, it’s very rare and common. So, let’s meet with EasyDropDown.JS

EasyDropDown.js – Easily Style your <Select> Dropdown menus either for use in forms or UI/navigation.

EasyDropDown.js is a jQuery plugin that will give you the power to convert all your unstyled <SELECT> menus to something you can Wowww! The plugin has various inbuilt themes that will give your Inputs and Menus a different look from the basic HTML select boxes.

jQuery easydropdown

Excited about the jQuery plugin, then let’s go through this article a bit deeper.

How to Use jQuery EasyDropDown plugin?

First step first: To start using the jQuery plugin you might need the javascript files as always and include them before your </body> tag.

Download the jQuery EasyDropDown.js plugin from the GitHub Repository.

Include it before the </body> section

Note: You also need to download the jQuery library also or you can also use the CDN to include the library in your web page.

That was the <script> that you included and now comes the turn of the CSS files to include them in your </head> tag using the below code:

Note: If you are going to use the themes then you also have to use the demo.css file in the </head> section (we will read about themes further in this article).

Now I can say that you are done with the installation process.

Recommended Readings:

Now the time has come to style all your select boxes within HTML only.

First of all, you need to define a class ‘dropdown‘ in your HTML markup.

If you want to label the dropdown menu then add a label class with value=””. Now after that insert all your <option> values one by one.

Check out the below code for more precision:

This small change in the select box will fetch you a clean and beautiful drop-down box far better than the HTML select box.

easydropdown demo

Moving further let’s learn more.

Now if you want a value to be selected by default then add selected attribute in the <option> tag by this the selected value will override the label. Check out the code below:

Wow.! That was really very easy to do with the select boxes. Now let’s continue to our article further and learn more about styling the select boxes.

The jQuery EasyDropDown plugin comes with 2 exciting themes: Metro and Flat.

Now on using the theme in the plugin, let’s see how to include it in the select box:

It’s is also very easy to come up with, just you have to add “data-settings='{“wrapperClass”:”theme-name”}’

theme-name can be either “Metro” or “Flat”, here I’m using the Flat theme.

This code will result in the styling the select in a dark green type color.

easydropdown themes

EasyDropDown.js Customization:

EasyDropDown.js has many pre-defined classes that you can use and call them in your CSS files or in your javascript to customize further:

.focus (container) On input focus
.open (container) On menu open
.scrollable (container) When in scroll mode (see cutOff)
.bottom (container) On scroll bottom-out
.touch (container) When in native touch UI mode (see nativeTouch)
.focus (menu item) On hover or keyboard focus
.active (menu item) Selected menu item

EasyDropDown.js Attributes:

The jQuery plugin has many more customizations using the defined attributes mentioned below.

cutOff (integer) The maximum number of items to show before scrolling (default is false).
wrapperClass (string)  The class of the parent wrapper element, used to target styling (default is ‘DropDown‘).
onSelect (function) A custom function to call when an item is selected.
nativeTouch (boolean) Fallback to native UI on touch-enabled devices (default is true).

So, Now I think you are ready to use the EasyDropDown.js jQuery plugin and certainly able to customize all your select boxes with the defined classes and attributes.

If you want to know more about the jQuery plugin and its documentation then you can check out here.

(Visited 346 times, 1 visits today)
Share is Caring...!
This entry was posted in Web Design and tagged , , , . Bookmark the permalink.
Amazon and the Amazon logo are trademarks of Amazon.com, Inc. or its affiliates.
Tuluzz.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for website owners to earn advertising fees by advertising and linking to Amazon(.com, .co.uk, .ca etc) and any other website that may be affiliated with Amazon Service LLC Associates Program.

Leave a Reply