{"id":15994254,"url":"https://github.com/pixelhandler/jquery-menutree-plugin","last_synced_at":"2025-08-24T10:21:49.611Z","repository":{"id":793454,"uuid":"491941","full_name":"pixelhandler/jQuery-MenuTree-Plugin","owner":"pixelhandler","description":"JavaScript plugin based on jQuery library that builds an expandable/collapsable menu tree from a list element with event delegation","archived":false,"fork":false,"pushed_at":"2010-05-08T09:24:08.000Z","size":280,"stargazers_count":17,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-25T07:48:27.219Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://menutree.pixelhandler.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pixelhandler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2010-01-28T10:17:49.000Z","updated_at":"2017-09-06T13:48:56.000Z","dependencies_parsed_at":"2022-07-29T02:09:12.313Z","dependency_job_id":null,"html_url":"https://github.com/pixelhandler/jQuery-MenuTree-Plugin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/pixelhandler/jQuery-MenuTree-Plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2FjQuery-MenuTree-Plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2FjQuery-MenuTree-Plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2FjQuery-MenuTree-Plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2FjQuery-MenuTree-Plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pixelhandler","download_url":"https://codeload.github.com/pixelhandler/jQuery-MenuTree-Plugin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pixelhandler%2FjQuery-MenuTree-Plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271844538,"owners_count":24832783,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-24T02:00:11.135Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-08T07:07:50.827Z","updated_at":"2025-08-24T10:21:49.567Z","avatar_url":"https://github.com/pixelhandler.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"jQuery MenuTree Plugin\n================================\n\nA JavaScript plugin based on jQuery library that builds an expandable/collapsable menu tree from a list element\n---------------------------------------\n* Requires JavaScript library: [jQuery](http://jquery.com/)\n\n* Developed using jQuery version 1.4 ... [Plugin page](http://plugins.jquery.com/project/menuTree)\n\n* Demo of the plugin behavior showing both lists and definition list... [Demo](http://rant.cc/z9V) \n\n* Status: New plugin, give it a try!\n\n* Event delegation for Click event binding to tree/list element, instead of binding to each anchor\n\n* Tracer plugin featured with demo.\n\n* Blog post for MenuTree plugin on my blog... [Blog](http://rant.cc/SC2 ) \n\nHow to build a menu tree that is expandable with jQuery\n-----------------------------\n\nYour html will need to link to the jQuery plugin in the head element\n\n`\u003cscript src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js\" type=\"text/javascript\" charset=\"utf-8\"\u003e\u003c/script\u003e`\n\nYour html markup needs to use a list like...\n\n`\u003cul id=\"myTree\"\u003e\n\t\u003cli\u003e\u003ca href=\"#\"\u003eTree Menu - toggle OR slideToggle animation\u003c/a\u003e\n\t\t\u003cul\u003e\n\t\t\t\u003cli\u003e\u003ca href=\"#\"\u003eTop Parent - Tier 1\u003c/a\u003e\n\t\t\t\t\u003cul\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"#\"\u003eChild - Tier 2\u003c/a\u003e\n\t\t\t\t\t\t\u003cul\u003e\n\t\t\t\t\t\t\t\u003cli\u003e\u003ca href=\"http://pixelhandler.com\"\u003ePixelhandler\u003c/a\u003e - Tier 3\u003c/li\u003e\n\t\t\t\t\t\t\t\u003cli\u003e\u003ca href=\"http://jquery.com\"\u003ejQuery\u003c/a\u003e - Tier 3\u003c/li\u003e\n\t\t\t\t\t\t\u003c/ul\u003e\n\t\t\t\t\t\u003c/li\u003e\n\t\t\t\t\u003c/ul\u003e\n\t\t\t\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003ca href=\"#\"\u003eLower Parent - Tier 1\u003c/a\u003e\n\t\t\t\t\u003cul\u003e\n\t\t\t\t\t\u003cli\u003e\u003ca href=\"#\"\u003eChild - Tier 2\u003c/a\u003e\n\t\t\t\t\t\t\u003cul\u003e\n\t\t\t\t\t\t\t\u003cli\u003eGrandchild - Tier 3 - One\u003c/li\u003e\n\t\t\t\t\t\t\t\u003cli\u003eGrandchild - Tier 3 - Two\u003c/li\u003e\n\t\t\t\t\t\t\u003c/ul\u003e\n\t\t\t\t\t\u003c/li\u003e\n\t\t\t\t\u003c/ul\u003e\n\t\t\t\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/li\u003e\n\u003c/ul\u003e`\n\n`\u003cdl id=\"definitions\"\u003e\n\t\u003cdt\u003e\u003ca href=\"#\"\u003eDefinition list - Term 1\u003c/a\u003e\u003c/dt\u003e\n\t\u003cdd\u003eDescription not targeted,\n\t\t\u003cem\u003euses CSS classes to collapse/expanded view\u003c/em\u003e\n\t\u003c/dd\u003e\n\t\u003cdt\u003e\u003ca href=\"#def\"\u003eTerm 2\u003c/a\u003e\u003c/dt\u003e\n\t\u003cdd\u003eDescription 2 with links listed\u003cbr /\u003e\n\t\t\u003col\u003e\n\t\t\t\u003cli\u003e\u003ca href=\"http://pixelhandler.com\"\u003ePixelhandler\u003c/a\u003e\u003c/li\u003e\n\t\t\t\u003cli\u003e\u003ca href=\"http://jquery.com\"\u003ejQuery\u003c/a\u003e\u003c/li\u003e\n\t\t\u003c/ol\u003e\n\t\u003c/dd\u003e\n\t\u003cdt\u003e\u003ca href=\"#def\"\u003eTerm 3\u003c/a\u003e\u003c/dt\u003e\n\t\u003cdd\u003eDescription 4\u003c/dd\u003e\n\t\u003cdt\u003e\u003ca href=\"#def\"\u003eTerm 4\u003c/a\u003e\u003c/dt\u003e\n\t\u003cdd\u003eDescription 4 with unordered list\u003cbr /\u003e\n\t\t\u003cul\u003e\n\t\t\t\u003cli\u003eOne\u003c/li\u003e\n\t\t\t\u003cli\u003eTwo\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\u003c/dd\u003e\n\u003c/dl\u003e`\n\nmenuTree plugin plugin uses a few CSS classes for visual design...\n\n`#myTree .menuTree:before {\n\tcontent: \"[+] \";\n}`\n\n`#myTree .expanded:before {\n\tcontent: \"[-] \";\n}`\n\n`#myTree .collapsed {\n\tdisplay: none;\n}`\n\nAt the end of your html markup, before the closing body element use a script to setup the function...\n\n`\u003cscript type=\"text/javascript\" charset=\"utf-8\"\u003e\n\n$(document).ready(function() {\n\t\n\t$('#myTree').menuTree({\n\t\tanimation: true,\n\t\thandler: 'slideToggle',\n\t\tanchor: 'a[href=\"#\"]',\n\t\ttrace: true\n\t});`\n\t\n});\n\n\u003c/script\u003e`\n\nThis 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).\n\nWhen 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'`\n\nThe default options:\n\n`$.fn.menuTree.defaults = { \n\t// setup animation\n\tanimation: false, \n\thandler: 'css',\n\tspeed: 'fast',\n\t// setup hooks in markup\n\tlistElement: 'ul',\n\tanchor: 'a[href=\"#\"]',\n\t// uses 'tracer' plugin\n\ttrace: false\n};`\n\nIf you have any questions, please feel free to ask them on the jQuery\nmeetup site, found here:  \n[http://meetups.jquery.com/group/jquerylosangeles](http://meetups.jquery.com/group/jquerylosangeles)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelhandler%2Fjquery-menutree-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpixelhandler%2Fjquery-menutree-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpixelhandler%2Fjquery-menutree-plugin/lists"}