Simple Dropdown List plugin

Single dropdown list

 

 

 

Coupled dropdown lists

 

 

 

Requirements - <head>

To call the plugin:

<link href="css/dropdown.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.simpledropdown.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.simpledropdown("#dropdown1, #dropdown2");
});
</script>

 

Requirements - The HTML

The HTML to be used:

<div id="dropdown1">
<ul>
<li>Select a country</li>
<li>
<ul>
<li><a href="#">Argentina</a></li>
<li><a href="#">Brazil</a></li>
<li><a href="#">Uruguay</a></li>
<li><a href="#">France</a></li>
<li><a href="#">United Kingdom</a></li>
</ul>
</li>
</ul>
</div>

This consists of a simple list that is transformed using jQuery. The list has to be placed inside a div with a custom ID or class with an absolute position. This ID will be used a a parameter when calling the function (see above). The position of the list needs to be placed as absolute with at least e.g. a left value, in case you need to place it in a custom position.

The plugin has been tested with Mozilla Firefox 3.6.11, Google Chrome, Safari 5.0.2, Opera, IE6, IE7, IE8, IE9 bĂȘta. On IE6 to IE8 you won't get the rounded corners from CSS3, but the system is working well. On IE6, there is still a small fix to be made for the width of the options on hover.

You can use the ie.css file in the CSS folder, it contains a few fixes for old IE versions.

Works perfectly on:
- IE7, IE8, IE9 bĂȘta
- Firefox 3.6
- Google Chrome
- Safari 5
- Opera

 

Enjoy :-)

Etienne Fardet