We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 19234
    • 1 Posts
    Sorry gang, but I just am not getting the concept of development with Wayfinder. I guess I am too accustomed to Joomla and other tools where menus are called menus, either horizontal or vertical, flyout or dropdown and the setup options are menu driven and obvious.

    I am sure Wayfinder is more powerful and flexible, but I just don’t know where to start. I have reviewed the ModX site docs and have implemented a simple vertical menu, but the sublevels are always open (doesn’t collapse and expand) and I have no idea how to create and horizontal dropdown menus.

    Any tutorials, guidance, anything would be greatly appreciated. I am desperately trying to abandon Joomla.

    Thanks.
      • 11975
      • 2,542 Posts
      Hi,

      you should have a look to this page from the author of wayfinder.
      All params are listed and there are examples at the bottom of the page.

      Hope that helps.

      :-)

      http://www.muddydogpaws.com/notebook/wayfinder-10.html
        Made with MODx : [url=http://www.copadel.com]copadel, fruits et l
        • 36582
        • 463 Posts
        Hope I can help a little here but I am very new myself.

        I struggled with the explanation for Wayfinder but the help on here has been great.

        The way I’ve begun to understand this is by following the howto.txt within the Mollio folder which comes along with the Wayfinder download in the repository. Even though I don’t completely understand this, it has got me up and running with a test/learning site where I can play around and see the results.

        Maybe someone with more experience than myself can confirm that this is a good place to start?
          Web site design in Nottingham UK by Chris Fickling http://www.chrisficklingdesign.co.uk
          • 18628
          • 16 Posts
          I’m struggling and could do with some help too. A simple ’how to’ tutorial would be fantastic just to get us newbies started. I don’t suppose someone could find the time to disect one of the examples on the muddy paws website and go through it step by step?
            • 34162
            • 1 Posts
            i second that!! just one sample desction would help us understand the concept a bit better
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              There are a million and one different ways to make a menu, and Wayfinder can do them all. By default, it generates a simple nested unordered list. There are hundreds of tutorials on the Web about working with unordered list menus. My favorite is A List Apart - Taming Lists.

              However, Wayfinder comes with a documentation folder with some examples, and the WIKI also has some examples. http://wiki.modxcms.com/index.php/Wayfinder
                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
                • 18628
                • 16 Posts
                That accordion menu tutorial in the wiki is exactly what I’m looking for. Thanks for pointing us in the right direction smiley
                  • 25695
                  • 12 Posts
                  Hello,

                  First off all, thanks for the great CMS! Always worked with the Joomla CMS, but this CMS makes me allot more happy! smiley

                  But through, need some advice on the following. I know wayfinder can procude every menu.. so I’m trying to fix this horizontal css menu.

                  http://veerle.duoh.com/blog/comments/extended_2_leveled_horizontal_navigation_in_css/

                  This is the output modx has to generate to get the menu working..
                  <div id="navigation">
                  <div class="menu">
                  <ul>
                  <li id="one">
                  <a onmouseover="show('smenu1'),hide('smenu2','smenu3','smenu4','smenu5');" onmouseout="hide('smenu1');" href="">
                  Consectetaura
                  </a>
                  </li>
                  <li class="divider">
                   
                  </li>
                  <li id="two">
                  <a onmouseover="show('smenu2'),hide('smenu1','smenu3','smenu4','smenu5');" onmouseout="hide('smenu2');" href="">
                  Lorem ipsum dolor sit amet ipsum
                  </a>
                  </li>
                  <li class="divider">
                   
                  </li>
                  </ul>
                  <div class="submenu">
                  <ul style="display: none;" id="smenu1" onmouseover="show('smenu1'),hide('smenu2','smenu3','smenu4','smenu5');" onmouseout="hide('smenu1');">
                  <li id="oneone">
                  <a href="#">
                  Eiusmod tempor et
                  </a>
                  </li>
                  <li class="subdivider">
                   
                  </li>
                  <li id="onetwo">
                  <a href="#">
                  Dolore
                  </a>
                  </li>
                  <li class="subdivider">
                   
                  </li>
                  <li id="onethree">
                  <a href="#">
                  Tempor
                  </a>
                  </li>
                  <li class="subdivider">
                   
                  </li>
                  <li id="onefour">
                  <a href="#">
                  Incididunt etlabore
                  </a>
                  </li>
                  <li class="subdivider">
                   
                  </li>
                  <li id="onefive">
                  <a href="#">
                  Eiusmod incididunt
                  </a>
                  </li>
                  <li class="subdivider">
                   
                  </li>
                  </ul>
                  </div>
                  </div>
                  </div>
                  


                  but damn.. how? Already did the following

                  - I made chunk with the Javascript
                  - Placed the css in a external css file

                  But what now.. I know that you need to place a outline chunk, and a parentrow... but the css menu uses some strange pa ramenters that makes me a little confused.

                  Could someone point me the right way..?

                  Tnx in advance!

                  Rogier
                    • 28042 ☆ A M B ☆
                    • 24,524 Posts
                    Why are you using a separate <li> for the divider image? This can be done by giving the <a> items a background image in the CSS with enough padding to space them nicely, or even simply by giving them a left border. The last one can be given a different background (or none) via its CSS classname, .last by default.
                      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
                      • 25695
                      • 12 Posts
                      Your right, the divider list is not nesecary..

                      But I think that the menu I wanted to use is a bit difficult to make, so im going to try the following one.

                      http://www.alistapart.com/d/hybrid/hybrid-4.html

                      found the menu on the forum, offcourse still have to find out how to work with the chunks etc.. but this one gives me more hope smiley