JavaScript image dropdown
You may have used my old MsDropdown. But this is new :) it is a web component. I so wanted to write this without jQuery and I did it finally. I hope one fine day safari will also support true web component features; just like other Chromium browsers does. Hey Apple! Are you listening? But please, do not worry; it works on safari too :).
It does not just beautify your boring dropdown but you can add an icon/image with each option. It works with your existing <select> element or you can create by a JSON object.
Image Dropdown Preview:
Image dropdown features at glance:
(Kept all the features from the previous version)
- Written in ES6 style using class
- Reactive properties
- Fully Skin-able
- Cleaner look
- Your original dropdown is safe, so your form post will not be messed. Well, it borrows the name from your original dropdown.
- Can be created via JSON object
- An image and a description can be inserted with text. Each <option> can have an image and description.
- It is possible to repopulate the data.
- You can Enabled/Disabled your dropdown.
- Almost all events and features are working as you expect with native dropdown.
- It's better than the original dropdown in many cases
Image DropDown v4.0 Features
- W3C Compatible
- More Organised
- Keyboard navigation
- Multiple selections (List). (Ctrl/Shift pressed also works)
- OptGroup is supported
- Multiple selections can have checkbox UI
- Multiple skins on a single page
- CSS sprite for icons.
- Object-Oriented approach
- Open/Close via object
- Add/Remove via object
- Enabled/Disable via object
- Removed all unnecessary methods and bloated code.
- It's FREE again :)
Dependency:
No dependency. Written in plain/vanilla JavaScript.
How to use it?
1. Yes, This is a normal dropdown but I've added image path in "data-image" attribute in <option> and is="ms-dropdown" in <select>. See below.
<select name="webmenu" is="ms-dropdown">
<option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
<option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
<option value="cd" data-image="icons/icon_cd.gif">CD</option>
<option value="email" selected="selected" title="icons/icon_email.gif">Email</option>
<option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
<option value="games" data-image="icons/icon_games.gif">Games</option>
</select>
Import CSS in the header.
2. Add this code in<head> the section. You may need to change the folder. Change dist/css/ folder to your desired folder.
<link rel="stylesheet" type="text/css" href="dist/css/dd.css" /></body>. Change dist/js/ folder to your desired folder.
<script src="dist/js/dd.min.js"></script>
You are done. That's It. I swear :)
Do you want to explore msDropdown in detail? Click here for more help
Download from GitHub.com