Simple Animated Drop Down List with jQuery and CSS3

A simple jQuery dropdown widget that turns a regular Html unordered list into a stylish animated dropdown list with CSS3 powered slide transition effects.

How to use it:

1. Create a list of items for the dropdown.

<ul class="dropdown trigger">
  <h2 class="dropdown-title">Choose your option</h2>
  <li class="dropdown-list list">jQuery Plugins</li>
  <li class="dropdown-list list">Google.com</li>
  <li class="dropdown-list list">Youtube.com</li>
  <li class="dropdown-list list">Facebook.com</li>
</ul>

2. The required CSS/CSS3 snippets to style the dropdown list.

.dropdown {
  max-width: 350px;
  margin: 2em auto;
  background: #2980b9;
}

.dropdown-title {
  position: relative;
  background: rgba(0, 0, 0, 0.1);
  padding: .5em;
  font-weight: 100;
  color: #fff;
  cursor: pointer;
}

.dropdown-title:before {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  background: rgba(0, 0, 0, 0.1);
  width: 55px;
  height: 100%;
  -webkit-transition: .4s .3s;
  -moz-transition: .4s .3s;
  transition: .4s .3s;
}

.dropdown-title:after {
  position: absolute;
  top: 10px;
  bottom: 0;
  right: 20px;
  margin: auto;
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid #fff;
  border-right: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid transparent;
}

.dropdown-list {
  display: none;
  list-style: none;
  padding: .9em;
  color: #fff;
  font-weight: 100;
  cursor: pointer;
}

.dropdown-list:hover { background: rgba(0, 0, 0, 0.2); }

.dropdown-list:nth-child(odd) { background: rgba(0, 0, 0, 0.1); }

.dropdown-list:nth-child(odd):hover { background: rgba(0, 0, 0, 0.2); }

3. Load the latest version of jQuery library at the bottom of your web page.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> 

4. Active the animated dropdown list with following JavaScript snippet.

var trigger = '.trigger';
var list = '.list';
function toggleIt() {
  $(list).slideToggle(200, 'linear');
}

$(trigger).on('click', function () {
	toggleIt();
});

---

This awesome jQuery plugin is developed by dope. For more Advanced Usages, please check the demo page or visit the official website.