Easy Small jQuery Dropdown Plugin - Cute Dropdown
File Size: | 14.2 KB |
---|---|
Views Total: | 7719 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Cute Dropdown is a simple, fast jQuery plugin that creates a menu style dropdown attaching to any html elements.
Features:
- Simple, small and easy to use.
- A lots of customization options.
- Triggered by hover, click or both.
- Easy to style in your own CSS.
How to use it:
1. Load the jQuery Cute Dropdown plugin's stylesheet in the head section for basic styles.
<link href="path/to/jktCuteDropdown.css" rel="stylesheet">
2. Add a list of links for the dropdown menu.
<li class="demo jktCD"> <span class="jktCD-click">Hover Me</span> <div class="jktCD-main jktCD-style-one"> <ul> <li class="item"><a href="#">Home</a></li> <li class="item"><a href="#">Settings</a></li> <li class="item"><a href="#">Profile</a></li> <li class="item"><a href="#">Login</a></li> <li class="item"><a href="#">Register</a></li> <li class="pemisah"></li> <li class="item"><a href="">Sign Out</a></li> </ul> </div> </li>
3. Load jQuery JavaScript library and the jQuery Cute Dropdown plugin's script at the bottom of the web page.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="path/to/jktCuteDropdown.js"></script>
4. Initialize the plugin.
$('.jktCD-one').jktCD();
5. Add your own CSS styles to the dropdown menu.
.jktCD-style-one { top: 35px; left: 0; border: 1px solid #DDD; } .jktCD-style-one .item { padding: 10px; width: 200px; } .jktCD-style-one:after { left: 20%; top: -10px; }
6. Available options and defaults.
// wrapper CSS cssName : 'jktCD', // class name for click menu display partClick : '.jktCD-click', // class name if you change the name of box style your own. partMain : '.jktCD-style-one', // click | hover | both, typeCursor : 'hover', // to hide triangle element triActive : true, // to set the distance around the main-box mainLeft : 0, // to adjust the spacing element triangle triLeft : 10
This awesome jQuery plugin is developed by JawaJava. For more Advanced Usages, please check the demo page or visit the official website.