Collapsible Tree Menu Plugin with jQuery and CSS3 - Nxeed Tree Menu
File Size: | 6.81 KB |
---|---|
Views Total: | 29273 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Nxeed Tree Menu is a simple jQuery plugin to create an accordion-style vertical tree menu that is collapsible and expandable with smooth sliding effects.
How to use it:
1. Include jQuery library and the tree menu script in the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="path/to/jquery.ntm.js"></script>
2. Create a multi-level tree menu using nested Html lists.
<div class="tree-menu demo" id="tree-menu"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">submenu 3</a></li> </ul> </li> </ul> </div>
3. Style the tree menu whatever you like.
.tree-menu ul { list-style: none; } .tree-menu > ul { padding: 0; } .tree-menu a { display: block; vertical-align: middle; text-decoration: none; padding: 6px; background-color: #efefef; border-radius: 4px; margin-bottom: 1px; color: #002888; -moz-transition: background-color 0.25s linear; -webkit-transition: background-color 0.25s linear; -o-transition: background-color 0.25s linear; transition: background-color 0.25s linear; -moz-transition-delay: 0.15s; -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s; } .tree-menu a:hover { color: #f53d3e; -moz-transition: background-color 0.1s linear; -webkit-transition: background-color 0.1s linear; -o-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } .tree-menu .active > a:hover, .tree-menu .selected > a, .tree-menu a:hover { background-color: #c6cdde; } .tree-menu .selected > a { color: #f53d3e; font-weight: bold; text-decoration: none; } .tree-menu .active > a { background-color: #e1e3e9; } .tree-menu .closed > a, .tree-menu .opened > a { padding-left: 24px; background-position: 4px 8px; background-repeat: no-repeat; } .tree-menu .closed > a { background-image: url(../img/icon-expand.gif); } .tree-menu .opened > a { background-image: url(../img/icon-collapse.gif); }
4. To enable the tree menu, just simply call the function on the parent element.
$(document).ready(function() { $('.demo').ntm(); });
5. Available parameters.
var defaults = { autoParentDetection: true, autoActiveDetection: true, itemsUniqueClasses: true, parentClass: 'parent', activeClass: 'active', selectedClass: 'selected', expandClass: 'opened', collapseClass: 'closed', spoilerButtonClickMinX: 4, spoilerButtonClickMaxX: 20, spoilerButtonClickMinY: 8, spoilerButtonClickMaxY: 24, slideEffect: true };
This awesome jQuery plugin is developed by nxeed. For more Advanced Usages, please check the demo page or visit the official website.