jQuery drop down menu with images – ddSlick

Need to create drop down menu with images? No problem – try ddSlick jQuery plugin and implement your modern UI design quickly.

A free and light weight jQuery for creating drop down menu with images

Ever wanted a drop down with images? In modern web design we can meet something like this pretty often. The ddSlick is a nice plugin, that allows you to create a custom drop down with images and description if needed.

This is useful everywhere you want to create something more and nicer, than standard select inputs, which are limited to text and value only. With this configurable plugin, you can now create a custom drop down that can very well include images, a short description, along with your usual text and value.

jQuery drop down with images in action
jQuery drop down with images in action

Key features:

– Converts your HTML select element to ddSlick

– Uses a minimum of CSS and no external stylesheets to download

– Adds images and description to otherwise boring drop downs

– Allows JSON to populate the drop down options

– Supports callback functions on selection

– Works as good even without images or description

How to use it?

It’s really pleasant to work with and create drop down menu with images easily.

As first, include the necessary libraries:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ddslick.js"></script>

Then create an empty placeholder for the custom drop down, for example:

<div id="myDropdown"></div>

If you want to use JSON way, you can create a simple endpoint, that returns appropriate structure. For test purpose we can also create following in JavaScript – this is a sample from official documentation:

// Dropdown plugin data
var xData = [
  {
    text: "Facebook",
    value: 1,
    selected: false,
    description: "Description with Facebook",
    imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
  },
  {
    text: "Twitter",
    value: 2,
    selected: false,
    description: "Description with Twitter",
    imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
  },
  {
    text: "LinkedIn",
    value: 3,
    selected: true,
    description: "Description with LinkedIn",
    imageSrc: "http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
  },
  {
    text: "Foursquare",
    value: 4,
    selected: false,
    description: "Description with Foursquare",
    imageSrc: "http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
  }
  // ...
];

Then, simply attach plugin to this placeholder, e.g.:

$('#myDropdown').ddslick({
  data: xData,
  width: 300, // or e.g. "90%"
  selectText: "Please select",
  imagePosition: "left",
  
  onSelected: function(selectedData) {
    console.log(selectedData);
  }
});

Note: use onSelected callback function to do something after the drop down option is selected. The selectedData will contain the selected text, value, description, imageSrc.

Another way – apply the plugin for the standard select input. When we prefer the approach described above, there is another option of using the plugin. Please check out the demo:

<select id="demo-htmlselect">
  <option value="0" 
    data-imagesrc="http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
    data-description="Description with Facebook">Facebook</option>
  
  <option value="1" 
   data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
   data-description="Description with Twitter">Twitter</option>

  <option value="2" selected="selected" 
    data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
    data-description="Description with LinkedIn">LinkedIn</option>

  <option value="3" 
    data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
    data-description="Description with Foursquare">Foursquare</option>
</select>

Attach plugin to this HTML select element:

$('#myDropdown').ddslick({
  onSelected: function(selectedData) {
    // ...
  }
});

There are many plugin options to adjust – please refer to the documentation.

Get the jQuery drop down menu with images plugin from GitHub:

https://github.com/prashantchaudhary/ddslick

Demo and docs – homepage:

http://designwithpc.com/Plugins/ddSlick

See also:

Checkboxradio – jQuery checkbox replacement plugin

jQuery fancy input box with amazing CSS3 effects

Tutorial: Creating a responsive menu in jQuery, HTML5 and CSS

jQuery plugin for custom checkboxes and radio buttons – wCheck

Smart Wizard – a jQuery form wizard plugin

Ideal Forms 3: build and validate responsive HTML5 forms!

jQuery plugin for custom select menus

Select2 – the jQuery replacement for select boxes

Enjoy!

Share:Share on Facebook1Share on Google+1Tweet about this on TwitterShare on LinkedIn3Pin on Pinterest1