Tree Javascript Menu (like the manager document tree)

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[bunk58]

Someone on the forum asked about a js tree menu like in the Manager document tree and I remembered I'd done one previously.
It doesn't use the excellent Wayfinder and offers limited features, but maybe of use to some.
See it in action on my sandbox.
The zip has instructions, it's very straightforward to install.

[MotSmart]

Cool !, Thanks for sharing 

[snow889]

wow! very nice one!
But i have a question! . Im not in Javascript very much so i cant do it myself......
I wonder if its possible to open the menu tree without clicking on the "+" sing. I would prefer if the document tree would open by just clicking on the container...
Thanx for reply!
zven
 

[snow889]

another question...
How are the elements of the menu sorted? Seems like they are in a weired order...
greez
zven

[bunk58]

The order of the menu is set in the snippet as Menu Index, Ascending, but could be changed to whatever you want.
Not sure about opening on clicking the doc/folder rather than the + sign, I'll have a look at the JavaScript and report back.

[snow889]

thanx - the menu is working flawlessly - but has anyone an idea how to open the menu just by clicking on the link and not on the plus sign?

[bunk58]

Do you mean clicking on the folder icon to open the sub menu?
You couldn't click on the link to open the sub menu because the link is to open the parent page.

[snow889]

Jeah i want to click on the link to open the menu and the document which is clicked... is this not possible?

[bunk58]

I don't think it's possible with this JavaScript.
The closest I can get is by setting
 

Code:

useCookies: true,

on line 36 of the dtree.js file, which means when you've clicked the + sign and then clicked through  to a sub page the sub menu stays open.

[ganeshXL]

It would be good to output a regular non-JS inside <noscript> for search machines etc... e.g.

Code:

<?php
/* Simple version of the tree type javascript menu by bunk 58 (David Bunker) 24/05/08 */
$siteName = $modx->config['site_name'];

$nojsOutput = '<noscript>';

$jsOutput = '';
$jsOutput .= '<script type="text/javascript">
<!--
d = new dTree(\'d\');
d.add(0,-1,\'Your Menu\');';
$result = mysql_query('SELECT * FROM `modx_site_content` WHERE `published`="1" AND `hidemenu`="0" AND `deleted`="0" ORDER BY `menuindex` ASC ');
while($row = mysql_fetch_array($result)) {
$jsOutput .= 'd.add( '. $row['id'] . ' , '. $row['parent'] . ' , \''. $row['pagetitle'] . '\', \'[~'. $row['id'] . '~]\');'."\n";
$url = $modx->makeUrl($row['id']);
$nojsOutput .= "<a href='$url'>{$row['pagetitle']}</a><br />";
}
$jsOutput .= '
document.write(d);
//-->
</script>';

$nojsOutput .= '</noscript>';
return ($jsOutput . "\n" . $nojsOutput);
?>

(untested)

or, well, do the noscript part simply with Wayfinder...