Developers and designers alike are always looking for new ways to make a website stand out or make a form less bland. From colors to layout, we all want a user to appreciate the look and feel of our websites. One part of a website or form that people tend to overlook are the dropdown lists. A well designed dropdown list is something both clients and users desire. It can help make selections stand out, and it adds a nice touch to the page. Let’s take a look at a picture of a traditional, un-styled drop down list:
Dropdown list of social networks

A dropdown list of social networks

It looks boring and default by appearance, but this design is the standard and is what many people are used to seeing. Thanks to a jQuery plugin called ‘ddSlick’ we are able to create much nicer looking dropdown lists that are both attractive and functional. Without writing any CSS you can have an already beautiful looking dropdown list, and it also supports the use of images. Creating a dropdown list with ddSlick is extremely easy to do and your users will love how it looks:
ddSlick Dropdown List

ddSlick Dropdown List

To create a ddSlick dropdown list you need to have linked to the ddSlick.js at the top of your page, after you include jQuery. ddSlick creates a dropdown list on a div, so you will need an opening and closing div in the same location as you would want to add the dropdown. For example “<div id=“myDropdown”></div>” and in your Javascript you will have something like:
ddSlick Javascript

ddSlick Javascript

If you noticed the ‘data’ option, it is using ddData. ddData is the name of the array of data that the dropdown list will be displaying. This will contain the text, images, values and descriptions of the items in the dropdown list. You can make this as short or as long as you want. The ‘imagePosition’ option sets the alignment of the images in your dropdown list which is optional. The ‘selectText’ option allows you to set the default text of your dropdown list. Going back to the ddData option, you should have an array of data set up like this:
ddData Array

ddData Array

With your Javascript setup and your array populated, you will have a beautiful, new dropdown list. The selected value of your ddSlick dropdown list is stored in an input element with the class ‘dd-selected-value’. If needed, you can get the value of that class, to get the selected element in your dropdown list. This is very helpful when writing additional code to respond to a user’s selection. After entering in all the code above, you will have a dropdown list that looks like this:
ddSlick Dropdown with Images

ddSlick With Images

For a full detailed look at ddSlick, check out their page at designwithpc.com/plugins/ddslick