We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 4310
    • 2,310 Posts
    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.
      • 20289
      • 958 Posts
      Cool !, Thanks for sharing smiley
        [img]http://i10.tinypic.com/52c4eir.gif[/img][/td]
        [td][Wiki] [Persian support forum]
        [SVN] [RTL SVN Branch] [bugs] [FishEye+Crucible] [Learn MODx!] | [My Google Code]
        [font=tahoma][برای دسترسی به راهنمای فارسی به [url=http://www.modxcms.ir]
        • 36446
        • 184 Posts
        wow! very nice one!
        But i have a question! wink. 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
          https://www.beautyislife-shop.de - premium make-up!
          https://www.topsterne.de - sell it here!
          ---------------------------------------------------------
          • 36446
          • 184 Posts
          another question... wink
          How are the elements of the menu sorted? Seems like they are in a weired order...
          greez
          zven
            https://www.beautyislife-shop.de - premium make-up!
            https://www.topsterne.de - sell it here!
            ---------------------------------------------------------
            • 4310
            • 2,310 Posts
            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.
              • 36446
              • 184 Posts
              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?
                https://www.beautyislife-shop.de - premium make-up!
                https://www.topsterne.de - sell it here!
                ---------------------------------------------------------
                • 4310
                • 2,310 Posts
                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.
                  • 36446
                  • 184 Posts
                  Jeah i want to click on the link to open the menu and the document which is clicked... is this not possible?

                    https://www.beautyislife-shop.de - premium make-up!
                    https://www.topsterne.de - sell it here!
                    ---------------------------------------------------------
                    • 4310
                    • 2,310 Posts
                    I don’t think it’s possible with this JavaScript.
                    The closest I can get is by setting
                    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.
                      • 10449
                      • 956 Posts
                      It would be good to output a regular non-JS inside <noscript> for search machines etc... e.g.

                      <?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...