Animated Multi-level Dropdown Side Menu with jQuery Tendina Plugin
File Size: | 148 KB |
---|---|
Views Total: | 12754 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.