Easy Small jQuery Dropdown Plugin - Cute Dropdown

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.