{"id":484,"date":"2010-03-02T08:20:57","date_gmt":"2010-03-02T15:20:57","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=2765"},"modified":"2010-03-02T08:20:57","modified_gmt":"2010-03-02T15:20:57","slug":"nested-tree-nav","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=484","title":{"rendered":"Nested Tree Nav"},"content":{"rendered":"<p>This snippet takes xml and builds a multi-tiered navigation based on how nodes are nested etc&#8230;:<\/p>\n<p>So that something like this:<\/p>\n<p>[XML]<br \/>\nvar menu:XML=<\/p>\n<nav>\n   <element label=\"one\"><br \/>\n       <element label=\"a\" \/><br \/>\n   <element label=\"b\" \/><br \/>\n   <element label=\"c\" \/><br \/>\n<\/element><br \/>\n<element label=\"two\"><br \/>\n     <element label=\"three\"><br \/>\n     <element label=\"aa\" ><br \/>\n\t   <element label=\"zevan\" \/><br \/>\n\t <\/element><br \/>\n     <element label=\"bb\" \/><br \/>\n     <element label=\"cc\" \/><br \/>\n <\/element><br \/>\n <\/element><br \/>\n<\/nav>\n<p>;<br \/>\n[\/XML]<\/p>\n<p>Turns into an expandable and collapsible menu that looks like this:<\/p>\n<div style=\"text-align:center;width:465px;\"><iframe loading=\"lazy\" title=\"flash on 2010-3-3 - wonderfl build flash online\" scrolling=\"no\" src=\"http:\/\/wonderfl.net\/blogparts\/4bf16883e58c46e51316fcf7e2b09d4e2ce9eb53\" width=\"465\" height=\"490\" style=\"border:1px black solid;\"><\/iframe><a href=\"http:\/\/wonderfl.net\/code\/4bf16883e58c46e51316fcf7e2b09d4e2ce9eb53\" title=\"flash on 2010-3-3 - wonderfl build flash online\">flash on 2010-3-3 &#8211; wonderfl build flash online<\/a><\/div>\n<p>Here is the timeline code:<\/p>\n<pre class=\"brush: as3; title: ; notranslate\" title=\"\">\r\nvar menu:XML=&lt;nav&gt;\r\n   &lt;element label=&quot;one&quot;&gt;\r\n       &lt;element label=&quot;a&quot; \/&gt;\r\n   &lt;element label=&quot;b&quot; \/&gt;\r\n   &lt;element label=&quot;c&quot; \/&gt;\r\n&lt;\/element&gt;\r\n&lt;element label=&quot;two&quot;&gt;\r\n     &lt;element label=&quot;three&quot;&gt;\r\n     &lt;element label=&quot;aa&quot; &gt; \r\n\t   &lt;element label=&quot;zevan&quot; \/&gt; \r\n\t &lt;\/element&gt;\r\n     &lt;element label=&quot;bb&quot; \/&gt;\r\n     &lt;element label=&quot;cc&quot; \/&gt;\r\n &lt;\/element&gt;\r\n &lt;\/element&gt;\r\n&lt;\/nav&gt;;\r\n\r\nvar elements:Array = new Array();\r\nsetupMenu();\r\n\r\nfunction setupMenu():void {\r\n\tparse(menu);\r\n\t\/\/ hide child elements\r\n\tfor (var i:int = 0; i&lt;elements.length; i++) {\r\n\t\tvar mc:MovieClip = elements&#x5B;i];\r\n\t\tif (mc.parents != 1) {\r\n\t\t\tremoveChild(mc);\r\n\t\t}\r\n\t}\r\n\tarrangeY();\r\n}\r\n\r\nfunction parse(m:XML):void {\r\n\tfor each (var d:XML in m.children()) {\r\n\t\tmakeBtn(d, numParents(d));\r\n\t\tparse(d);\r\n\t}\r\n}\r\n\r\nfunction makeBtn(d:XML, offsetX:int):void {\r\n\tvar btn:MovieClip = new MovieClip();\r\n\tbtn.x = offsetX * 20;\r\n\tbtn.y = numChildren * 20;\r\n\tbtn.data = d;\r\n\tbtn.parents = offsetX;\r\n\tbtn.value = d.@label;\r\n\r\n\tvar txt:TextField = new TextField();\r\n\ttxt.text = d.@label;\r\n\ttxt.selectable = false;\r\n\ttxt.border = true;\r\n\ttxt.width = 100;\r\n\ttxt.mouseEnabled = false;\r\n\ttxt.height = 19;\r\n\tbtn.addChild(txt);\r\n\tbtn.buttonMode= true;\r\n\taddChild(btn);\r\n\t\r\n\t\/\/ store references to btn\r\n\telements.push(btn);\r\n\telements&#x5B;d.parent().@label+&quot;_&quot;+d.@label] = btn\r\n\r\n\tbtn.addEventListener(MouseEvent.CLICK, onClick);\r\n}\r\n\r\nfunction onClick(evt:MouseEvent):void {\r\n\tshowHide(MovieClip(evt.currentTarget));\r\n\tarrangeY();\r\n\ttrace(evt.currentTarget.value);\r\n}\r\n\r\nfunction showHide(btn:MovieClip, forceHide:Boolean=false):void {\r\n\tfor each (var d:XML in btn.data.children()) {\r\n\t\tvar mc:MovieClip = elements&#x5B;btn.data.@label+&quot;_&quot;+d.@label];\r\n\t\tif (contains(mc)) {\r\n\t\t\tremoveChild(mc);\r\n\t\t\tshowHide(mc, true);\r\n\t\t} else if (forceHide == false) {\r\n\t\t\taddChild(mc);\r\n\t\t}\r\n\t}\r\n}\r\n\r\nfunction arrangeY():void {\r\n\tvar inc:Number = 0;\r\n\tfor (var i:int = 0; i&lt;elements.length; i++) {\r\n\t\tif (contains(elements&#x5B;i])) {\r\n\t\t\telements&#x5B;i].y = inc * 20;\r\n\t\t\tinc++;\r\n\t\t}\r\n\t}\r\n}\r\n\r\nfunction numParents(e:XML):int {\r\n\tvar num:int = 0;\r\n\twhile (e.parent()!= null) {\r\n\t\tnum++;\r\n\t\te = e.parent();\r\n\t}\r\n\treturn num;\r\n}\r\n<\/pre>\n<p>This is one of those snippets I&#8217;ve had laying around but never got around to posting. Next time I need to do a multi-tiered nav I&#8217;ll wrap it up into a nice class (the wondeful class was done just by using <a href=\"https:\/\/actionsnippet.com\/timeline_to_doc.php\" target=\"blank\">my script that auto-converts timeline code to doc class code<\/a>).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This snippet takes xml and builds a multi-tiered navigation based on how nodes are nested etc&#8230;: So that something like this: [XML] var menu:XML= ; [\/XML] Turns into an expandable and collapsible menu that looks like this: flash on 2010-3-3 &#8211; wonderfl build flash online Here is the timeline code: var menu:XML=&lt;nav&gt; &lt;element label=&quot;one&quot;&gt; &lt;element [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-484","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/484","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=484"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/484\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}