How to Add a Collipasable Treemenu using WayFinder

Well i just started playing with modx a week ago or so and plan on using it for my personal Web Development/Freelance Site. I’ve always liked a tree menu for my site nav menu and figured that it would be easy to add to modx with just a minor change to the wayfinder php file. Anyway i used the Dynamic Drive simple tree menu to do this.

-- http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

Visit the above link and download the Javascript file, the css file and the 3 images. Include the java and css file as you would in the example they give you, then do the following to display the menu.


Using this menu system requires a ID to be added to the root UL which i discovered wayfinder could not do so i modifyed wayfinder to do this. Please note i used wayfinder 1.0

--Step #1--

-> Open Manager->Resources->Snippets->Wayfinder

Add this line under the other lines that look like it

$wf->css[’rootID’] = isset($rootID)? $rootID: ’’;

--Step #2--

-> In your text editor open the wayfinder.php file ( located in assets/snippets/wayfinder/wayfinder.inc.php )

Search for this line ( around line # 189 )

if ($classNames) $useClass = ’ class="’ . $classNames . ’"’;

Now directly under it add

            if ($curLevel == 1) {

                 $useClass .= ’ id="’ . $this->css[’rootID’] . ’"’;              

            }

-- Step #3 --

Now your call to Wayfinder will look like this

              [!Wayfinder?startId=`0`  &hereClass=`` &rowTpl=``&titleOfLinks=`description`&selfClass=`` &rootID=`treemenu` &outerClass=`treeview` &innerClass=’’!]

<script type="text/javascript">

ddtreemenu.createTree("treemenu", true, 5)

</script>

And there you have it a working tree menu.

You can see a sample on my unfinished site at www.dakotastorm.com

This modification to wayfinder can be used for any menu system that requires a root id to be added.

--ShawnC

You can very easily add an ID to the root UL by specifying a chunk template to use for it. No need to hack the code.

See the Wayfinder documentation for examples:



Add to your Wayfinder call:

i tryd doing that and it added the id to every parent ul and not the actual root of the menu. I messed with the template system for afew hours and couldnt find the proper template nor do i see how it has a true root template in the code, The thing with adding a id is you can only use a id once in a html page. What i mean is that yes you do have a outer template but this outer template is applyed to every ul in the menu, so if i have a menu structure of

Link 1
Link 2
Link 3
Inside Link 1
Link 4

then i will have the outer template applyed to every ul inside the menu so Link 3 would also receive the outer template. Honestly there should be a template that works for the true root of the menu as many menu systems require the start of the menu to be different slightly then the rest.


The other thing i thought was rather weird was that outerClass will add a class at the root of the menu yet outertemplate does not change the true other menu.