Simple Animated Drop Down List with jQuery and CSS3
File Size: | 1.68 KB |
---|---|
Views Total: | 7301 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.