https://github.com/pixelhandler/jquery-menutree-plugin

JavaScript plugin based on jQuery library that builds an expandable/collapsable menu tree from a list element with event delegation
https://github.com/pixelhandler/jquery-menutree-plugin

Last synced: about 2 months ago
JSON representation

JavaScript plugin based on jQuery library that builds an expandable/collapsable menu tree from a list element with event delegation

• Host: GitHub
• URL: https://github.com/pixelhandler/jquery-menutree-plugin
• Owner: pixelhandler
• Created: 2010-01-28T10:17:49.000Z (almost 15 years ago)
• Default Branch: master
• Last Pushed: 2010-05-08T09:24:08.000Z (over 14 years ago)
• Last Synced: 2024-10-15T07:48:45.401Z (2 months ago)
• Language: JavaScript
• Homepage: http://menutree.pixelhandler.com/
• Size: 273 KB
• Stars: 17
• Watchers: 3
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
jQuery MenuTree Plugin

================================

A JavaScript plugin based on jQuery library that builds an expandable/collapsable menu tree from a list element

---------------------------------------

* Requires JavaScript library: [jQuery](http://jquery.com/)

* Developed using jQuery version 1.4 ... [Plugin page](http://plugins.jquery.com/project/menuTree)

* Demo of the plugin behavior showing both lists and definition list... [Demo](http://rant.cc/z9V) 

* Status: New plugin, give it a try!

* Event delegation for Click event binding to tree/list element, instead of binding to each anchor

* Tracer plugin featured with demo.

* Blog post for MenuTree plugin on my blog... [Blog](http://rant.cc/SC2 ) 

How to build a menu tree that is expandable with jQuery

-----------------------------

Your html will need to link to the jQuery plugin in the head element

``

Your html markup needs to use a list like...

`


	


Tree Menu - toggle OR slideToggle animation

		


			


Top Parent - Tier 1

				


					


Child - Tier 2

						


							


Pixelhandler - Tier 3

							


jQuery - Tier 3

						

					

				

			

			


Lower Parent - Tier 1

				


					


Child - Tier 2

						


							
Grandchild - Tier 3 - One

							
Grandchild - Tier 3 - Two

						

					

				

			

		

	

`


`


	
Definition list - Term 1

	
Description not targeted,

		uses CSS classes to collapse/expanded view

	

	
Term 2

	
Description 2 with links listed


		


			
Pixelhandler

			
jQuery

		

	

	
Term 3

	
Description 4

	
Term 4

	
Description 4 with unordered list


		


			
One

			
Two

		

	

`


menuTree plugin plugin uses a few CSS classes for visual design...

`#myTree .menuTree:before {

	content: "[+] ";

}`

`#myTree .expanded:before {

	content: "[-] ";

}`

`#myTree .collapsed {

	display: none;

}`

At the end of your html markup, before the closing body element use a script to setup the function...

`

$(document).ready(function() {

	

	$('#myTree').menuTree({

		animation: true,

		handler: 'slideToggle',

		anchor: 'a[href="#"]',

		trace: true

	});`

	

});

`

This plugin has default options which you may override. The `animation` option may use jQuery `toggle` or `slideToggle` methods, or just use the default `css` option to show/hide the child list(s).

When called with the `animation: true` option the plugin uses the `handler` option to select `slideToggle` or `toggle` method to add effects to the display of child menu(s). You may set the speed as you please, e.g. `speed: 'slow'`. Also, you may indicate what the child menu(s) are marked up with, e.g. `listElement: 'ol'` instead of the default `listElement: 'ul'`

The default options:

`$.fn.menuTree.defaults = { 

	// setup animation

	animation: false, 

	handler: 'css',

	speed: 'fast',

	// setup hooks in markup

	listElement: 'ul',

	anchor: 'a[href="#"]',

	// uses 'tracer' plugin

	trace: false

};`

If you have any questions, please feel free to ask them on the jQuery

meetup site, found here:  

[http://meetups.jquery.com/group/jquerylosangeles](http://meetups.jquery.com/group/jquerylosangeles)