We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 50265
    • 13 Posts
    Hello I am building this site: https://westtownapps.com/modx2/

    The menu options Home, Applications, Testimonials and Making Contact are all single pages at the top level, so when a user clicks on them I want him / her to open the page.

    The menu options 'About Functional Fluency', 'About TIFF' and 'Resources' have sub-pages. I only want the menu options in the drop-downs to respond to clicks, not the top level menu options (which currently opens the blank page).

    Can this be solved by a setting in the Document form? Or is this a problem that Wayfinder can solve?

    I read the RTFM on Wayfinder and the Wayfinder Introductory Examples but I can't see from those example how to build a menu with both types of action. Can anyone please point me in the general direction?

    Thanks!
    Tony
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      Very nice site design. Clean and elegant.

      Wayfinder is designed to solve that problem. Use the '&categoryFoldersTpl' property with a custom chunk tpl to output those items.
      Name of the chunk containing the template for category folders. Category folders are determined by setting the template to blank or by setting the link attributes field to rel="category".
      For example, the categoryFolderTpl chunk might look like this:
      <li class=" dropdown">
      	<span title="About Functional Fluency" class="dropdown-toggle disabled" data-toggle="dropdown" >
      		[[+wf.menutitle]] 
      		<b class="caret"></b>
      	</span>
      	[[+wf.wrapper]]
      </li>

      You would probably need to adjust the CSS to style the span element as if it were an a element.

      However, from the looks of that classname "disabled" it appears that it's supposed to have some javascript that automatically disable that link. What has happened to that?

        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 50265
        • 13 Posts
        Quote from: sottwell at May 25, 2015, 11:11 AM
        Very nice site design. Clean and elegant.

        Wayfinder is designed to solve that problem. Use the '&categoryFoldersTpl' property with a custom chunk tpl to output those items.
        Name of the chunk containing the template for category folders. Category folders are determined by setting the template to blank or by setting the link attributes field to rel="category".
        For example, the categoryFolderTpl chunk might look like this:
        <li class=" dropdown">
        	<span title="About Functional Fluency" class="dropdown-toggle disabled" data-toggle="dropdown">
        		[[+wf.menutitle]] 
        		<b class="caret"></b>
        	</span>
        	[[+wf.wrapper]]
        </li>

        You would probably need to adjust the CSS to style the span element as if it were an a element.

        However, from the looks of that classname "disabled" it appears that it's supposed to have some javascript that automatically disable that link. What has happened to that?


        Hi thanks

        for your reply and your kind comment about the site.

        I'm not sure about the javascript - the site is Bootstrap plus a simple theme.

        I think I might need to do some more reading.

        Thanks again,
        Tony
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          You should have some Javascript somewhere that looks like this
          $(".disabled").click(function(event) {
            event.preventDefault();
          });
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 50265
            • 13 Posts
            Quote from: sottwell at May 25, 2015, 10:24 PM
            You should have some Javascript somewhere that looks like this
            $(".disabled").click(function(event) {
              event.preventDefault();
            });

            This was a great clue. I use the extra - style - Bootstrap 1 and in the small side text it's written:

            "You can go to the System Settings and set setting bootstrap.dropdown_disabled to 0 or 1. If equal to 1 then the upper menu item that has child pages will be possible to click and go to the corresponding page."

            Which works!
            Thanks.