Animated Multi-level Dropdown Side Menu with jQuery Tendina Plugin

Tendina is a tiny jQuery plugin for creating a multi-level sidebar navigation menu with a smooth sliding animation. Click or mouse hover the parent menu will toggle the sub menus.

How to use it:

1. Load the jQuery library and the jQuery tendina plugin at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="lib/tendina.min.js"></script> 

2. Create a multi-level menu using nested Html unordered lists.

<ul class="dropdown">
  <li> <a href="#">Menu 1</a>
    <ul>
      <li><a href="#">Submenu 1</a></li>
    </ul>
  </li>
  <li> <a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Submenu 2</a></li>
      <li><a href="#">Submenu 2</a></li>
      <li><a href="#">Submenu w/ childrens</a>
        <ul>
          <li>Subsubmenu 2</li>
          <li>Subsubmenu 2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li> <a href="#">Menu 3</a>
    <ul>
      <li><a href="#">Submenu 3</a></li>
      <li><a href="#">Submenu 3</a></li>
    </ul>
  </li>
</ul>

3. A little CSS to style the menu.

.dropdown {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 250px;
  background-color: #27ae60;
  padding-top: 20px;
  font-size: 12px;
}

.dropdown li { padding: 0 10px; }

.dropdown li.selected { background-color: #2ecc71; }

.dropdown li a {
  display: block;
  width: 100%;
  padding: 10px;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
  color: #fff;
}

.dropdown li > ul li { padding: 0 20px; }

.dropdown li > ul li a { color: #fff; }

.dropdown li > ul li > ul li { padding: 10px 30px; }

4. Call the plugin on the parent list to enable the sidebar menu.

$('.dropdown').tendina({
// enable slide down/up animations
animate: true,

// animation speed
speed: 500,

// open menus on mouse hover
onHover: false,

// the delay after which Tendina will open menus on hover. 
hoverDelay: 200,

// The active menu that will be open when a new Tendina menu is created. 
// activeMenu: '.my-active-category'
// or activeMenu: $('.my-active-category')
activeMenu: null,

// Callback that will be executed once any menu/submenu has been opened.
openCallback: function($clickedEl) {
  console.log($clickedEl);
},

// Callback that will be executed once any menu/submenu has been closed.
closeCallback: function($clickedEl) {
  console.log($clickedEl);
}
})

5. Public methods.

// destroy the plugin
$('#menu').tendina('destroy')

// hide all open submenus
$('#menu').tendina('hideAll')

// show all submenus
$('#menu').tendina('showAll')

Change logs:

2015-04-05

• Update to v0.11.1

2014-07-25

• Update to v0.10.1

2014-06-25

• Fixed a bug on the _getSelector function

---

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