This is my first post of social code using the github repository at :
http://github.com/pixelhandler/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
-
Developed using jQuery version 1.4 … Plugin page
-
Demo of the plugin behavior showing both lists and definition list… Demo
-
Status : New plugin, give it a try!
-
Tracer plugin added and featured with demo.
-
Blog post for MenuTree plugin on my blog… Blog
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
- Child - Tier 2
- Lower Parent - Tier 1
-
Child - Tier 2
- Grandchild - Tier 3 - One
- Grandchild - Tier 3 - Two
-
Child - Tier 2
-
Top Parent - Tier 1
- Definition list - Term 1
- Description not targeted, uses CSS classes to collapse/expanded view
- Term 2
- Description 2 with links listed
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
Social Justice is a movement to end injustice in the world
Human trafficking fact: 27 million modern day slaves; more today than there was when England ruled the world during the trans-Atlantic slave trade.
William Wilberforce fought in his country for the abolition of the slave trade. Today, (IJM) International Justice Mission is freeing slaves every day. More stats:
…We live in a broken world sex trafficking even exists in OC, CA.
Live for something… with a passion to end injustice, seek out likeminded people. You will not have wings to fly if you get overwhelmed. Try a region least likely to be evangelized (none or only a few existing missions efforts) or where life is very short. Just start with one cause. Find something you are passionate about and can do something about.
Because we live in an interdependent world we cannot ignore the problems in the world… do justly, speak up!
These notes are from a discussion with : @judahtrabulsi