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.
1. Yes, This is a normal dropdown but I've added image path in
"data-image" attribute 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>
<head>the section. You may need to change the folder. Change
dist/css/folder to your desired folder.
3. And below code before the
<link rel="stylesheet" type="text/css" href="dist/css/dd.css" />
dist/js/folder to your desired folder.
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