Simple Dropdown List plugin

Single dropdown list

Coupled dropdown lists

Requirements - <head>

To call the plugin:

<link href="css/jquery.dropdown.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpledropdown.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#acontainer").simpledropdown({speed : 300});
});
</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>

Requirements - The CSS

The CSS to be used is described below (available in jquery.dropdown.css as well :

/*
Name: jQuery Simple Drop Down Plugin Optimized Stylesheet
Author: Etienne Fardet
Version: 1.4
*/

@charset "utf-8";

/* General styles for demo */
body {font-family:Verdana, Geneva, sans-serif; font-size:14px;width:60%;margin:0 auto;}
a {text-decoration:none;color:#039;}
h3 {clear:both;color: #039;}
pre {border:1px solid black; padding:8px;width:auto; height:250px; margin:20px;overflow:auto;}
strong {color: #093;}
.requirements {list-style:square;}
.author {color: #003;font-size: 12px;font-weight: bold;font-style: italic;}

/***** Rounded corners *****/
/* 
Engines exist for making corners round, however, this approach fits all browsers, including IE6
You can make your own and customize the provided images. 
Currently, CSS and images are made to get along together (6x6px corners), 
this section must be carefully changed
*/
.TopLeft, .TopRight, .BottomLeft, .BottomRight {width:6px;height:6px;position:absolute;}
.TopLeft {background:url(../img/top-left.png) no-repeat;}
.TopRight {background:url(../img/top-right.png) no-repeat;}
.BottomLeft {background:url(../img/bottom-left.png) no-repeat;}
.BottomRight {background:url(../img/bottom-right.png) no-repeat;}
.TopMiddle, .BottomMiddle {width:154px;height:6px;background:url(../img/middle-horizontal.png) repeat-x;position:absolute;left:6px;}
.VerticalLeft, .VerticalRight {width:6px;height:27px;display:block;background:url(../img/middle-vertical.png) repeat-y;position:absolute;top:6px;}
.TopRight, .VerticalRight, .BottomRight {left:160px;}
.Middle {background:#000;position:absolute;left:6px;top:6px;width:154px;height:27px;}
.BottomLeftSelected {background:url(../img/bottom-left-selected.png) no-repeat;}
.BottomMiddleSelected  {background:url(../img/middle-horizontal-selected.png) repeat-x;}
.BottomRightSelected {background:url(../img/bottom-right-selected.png) no-repeat;}

/* Drop 1 */
#dropdown1 a, #dropdown2 a, #dropdown3 a {font-family:Arial;font-size:80%;font-weight:bold;}
.mycorners1 {margin-bottom:-1px;}
.mycorners2, .mycorners3 {margin-top:-1px;}

#dropdown1 {position:relative;background:transparent;width:166px;margin:0 0 20px 0;padding:0 0 0 0;height:auto;bottom:0;right:0;z-index:2;float:left;clear:both;overflow:visible;}
#dropdown1 .dropdown {position:relative;list-style-type:none;display:block;margin:0;padding:0;background:transparent;color:#fff;cursor:pointer;}
#dropdown1 .drop ul {width:auto;height:auto;list-style-type:none;margin:0;padding:0;background:#fff;}
#dropdown1 .drop ul li {display:block;padding:0;margin:0;background-color: #000;border-left:none;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;border:none;;}
#dropdown1 .drop ul li a:hover {background:#EA7D00;color:#fff;}
#dropdown1 .drop {width:100%;border:none;position: absolute;height:0;overflow:hidden;margin-top: 0;margin-bottom: 0;}
#dropdown1 .selected {width:auto;padding:0;}
#dropdown1 .selected a{padding:10px 8px;display:block;color:#fff;}
#dropdown1 .dropdown ul li a {width:auto;text-decoration:none;color:#fff;display:block;margin:0;padding:10px 8px;}

/* Drop 2 */
#dropdown2 {position:relative;background:transparent;width:166px;margin:0 10px 20px 0;padding:0 0 0 0;height:auto;bottom:0;right:0;z-index:1;float:left;clear:both;overflow:visible;}
#dropdown2 .dropdown {position:relative;list-style-type:none;display:block;margin:0;padding:0;background:transparent;color:#fff;cursor:pointer;}
#dropdown2 .drop ul {width:auto;height:auto;list-style-type:none;margin:0;padding:0;background:#fff;}
#dropdown2 .drop ul li {display:block;padding:0;margin:0;background-color: #000;border-left:none;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;border:none;;}
#dropdown2 .drop ul li a:hover {background:#EA7D00;color:#fff;}
#dropdown2 .drop {width:100%;border:none;position: absolute;height:0;overflow:hidden;margin-top: 0;margin-bottom: 0;}
#dropdown2 .selected {width:auto;padding:0;}
#dropdown2 .selected a{padding:10px 8px;display:block;color:#fff;}
#dropdown2 .dropdown ul li a {width:auto;text-decoration:none;color:#fff;display:block;margin:0;padding:10px 8px;}

/* Drop 2 */
#dropdown3 {float:left;position:relative;background:transparent;width:166px;margin:0 0 20px 0;padding:0 0 0 0;height:auto;bottom:0;right:0;z-index:0;float:left;overflow:visible;}
#dropdown3 .dropdown {position:relative;list-style-type:none;display:block;margin:0;padding:0;background:transparent;color:#fff;cursor:pointer;}
#dropdown3 .drop ul {width:auto;height:auto;list-style-type:none;margin:0;padding:0;background:#fff;}
#dropdown3 .drop ul li {display:block;padding:0;margin:0;background-color: #000;border-left:none;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;border:none;;}
#dropdown3 .drop ul li a:hover {background:#EA7D00;color:#fff;}
#dropdown3 .drop {width:100%;border:none;position: absolute;height:0;overflow:hidden;margin-top: 0;margin-bottom: 0;}
#dropdown3 .selected {width:auto;padding:0;}
#dropdown3 .selected a{padding:10px 8px;display:block;color:#fff;}
#dropdown3 .dropdown ul li a {width:auto;text-decoration:none;color:#fff;display:block;margin:0;padding:10px 8px;}

Make sure you remove the first section of CSS, as it applies to common tags such as 'body', etc, so no overrides are applied to your own stylesheets.

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, e.g. 'dropdown1' in the above example, and is then called with the plugin using css ID or class.

- The single lists can now be placed in any div container. Positioning is set to relative for the div's, and absolute for the dropdown. This way you can place the lists anywhere in your html.

- To have several lists together horizontally on a same line, you just need to make your divs float.

- If you have lists on top of other lists, you'll have to make sure the z-index property is correctly set, so your lists do not inconsistently display on click.

The plugin has been tested with latest version Mozilla Firefox, Google Chrome, Safari, Opera, IE (up to 10). After a few fixes, the plugin is now working identically on ALL browsers, IE6 included, WITH rounded corners (using images).

I have completely reworked this 2013 edition to make a cleaner and responsive plugin. It is working like a charm on iDevices (iPad, iPhone, Samsung tablets), especially if you change your root div width to percentages ;-)

 

Works perfectly on:
- IE6, IE7, IE8, IE9, IE10
- Firefox
- Google Chrome
- Safari
- Opera

 

Enjoy :-)

Etienne Fardet

 

Changelog:

v1.4 - May 14th 2013

- Plugin reworked - Now more jQuery compliant javascript, possibility to extend options
- Reworked effect to make it more fluid, applied on global container and not by individual containers (li's).
- Works on mobile devices and tablets

v1.3 - March 25th 2011

- Plugin reworked - now works identically on every browser, including IE6
- Added round corners (using image trick)- working on every browser
- Fixed previous issues on IE/old browsers
- Added more details to plugin codes (also plugin JS code is explained in the unpacked version)

v1.2 - January 19th 2011

- Removed absolute positioning
- Updated the demo page with more details

To do:

- Implementing options and AJAX
- Fix hover on IE6
- Add rounded corners for IE versions
- Fixing links reconducting to top of the page (with hrefs set '#' to)