I did lot of research in Google, found some Jquery/javascript plugins and approaches and explored all of them. After trying with most of the approaches and plugins I have felt that that the Jquery plugin DropKick well suits for my requirement. You can download this plugin at the following url.
http://jamielottering.github.com/DropKick/
How to use dropkick in your code?
1. Write the markup code for regular html dropdown as shown below
<select id="ddlCountry">
<option value="1">India</option>
<option value="2">USA</option>
<option value="3">UK</option>
<option value="4">Russia</option>
</select>
2. Add the dropkick javascript reference to your page in header section
3. Dropkick works for Jquery so you must also make sure you added reference to Jquery
4. Apply dropkick effect to your regular dropdown control as shown below
$('#ddlCountry').dropkick();
5. You might want to handle the change event for the dropkick, in that case you can write the following code snippet.
$('.ddlCountry').dropkick({
change: function (value, label) {
alert('Your selection: ' + label + ':' + value);
}
});
6. You also need to add the reference to dropkick css file to make sure you are getting the custom styles applied. And also you can edit the css to customize style effects for your specific requirement.
You can see the sample customised dropdown by dropkick below:
You can find more information at http://jamielottering.github.com/DropKick/
