We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 22815
    • 1,097 Posts
    Looks promising, but I can’t replicate my existing menu in it.

    My menu has two levels. It should go:
    <ul><li>Stuff I Like
    <ul><li>Sauna</li><li>MODx</li></ul>
    </li>
    <li>About Me</li></ul>

    ie the second level is inside the <LI> of the first level.

    If I follow the code example in the snippet, I get instead:

    <ul><li>Stuff I Like</li>
    <ul><li>Sauna</li><li>MODx</li></ul>
    <li>About Me</li></ul>


    Which is terrible, not least because it isn’t valid code. (UL not valid inside UL).

    I have two ways of getting either valid code or for it to look right:
    1) by wrapping <LI> around the innerTpl (valid, screws up my look).
    2) by taking out the </LI> from the row, and get the browser to infer the end of the tags (looks perfect, but not closing a tag?? In 2006?)

    I tried putting the inner template in the row treating it like the inner/outer templates, but it didn’t work.
    <li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>


    The call I am using is
    [[Wayfinder? &startId=`0` &level=`2` &hideSubMenus=`0` &outerTpl=`wfOuter` &rowTpl=`wfRow` &hereTpl=`wfHere` &debug=`true` &textOfLinks=`menutitle` &innerTpl=`wfInner` &innerRowTpl=`wfRow` &innerHereTpl=`wfHere` &titleOfLinks=`longtitle`]]


    Either I’m doing something wrong, or there’s a glaring omission in this code. I think being able to nest inside the parent row is essential.
      No, I don&#39;t know what OpenGeek&#39;s saying half the time either.
      MODx Documentation: The Wiki | My Wiki contributions | Main MODx Documentation
      Forum: Where to post threads about add-ons | Forum Rules
      Like MODx? donate (and/or share your resources)
      Like me? See my Amazon wishlist
      MODx "Most Promising CMS" - so appropriate!
      • 15987
      • 786 Posts
      Paul,
      It is a "glaring omission", I will get the code to nest correctly.

      Kyle
        • 25663 MODX Staff
        • 12,272 Posts
        We need to add a placeholder for this situation, so that the row template might look like:

        <li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.nestedmenu+]</li>
          Ryan Thrash, MODX Co-Founder
          Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
          • 25663 MODX Staff
          • 12,272 Posts
          Kyle, on a related note, can we add a tiny bit of logic to check to make sure there are a minimum number of templates declared, or perhaps (and my preference) we should just add a very basic and minimum set of templates hard coded so some output will result.

          We might also update the class section for sensible defaults like "first", "last", "here" (or "active") and so forth for the basics.

          Finally, we had talked about enabling the regClientCSS function to load CSS as well for the menu. Any more things I’m forgetting? tongue
            Ryan Thrash, MODX Co-Founder
            Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
            • 25663 MODX Staff
            • 12,272 Posts
            And here’s a quick tutorial for the testers. The following is how you would convert the popular Mollio Menu template menus with Wayfinder. I think you’ll see how much easier it will be to create dynamic, nested menus compared to DropMenu. This is totally untested, but it should work...

            First, reference this example page. Nice eh?

            For reference, here’s the Menu Code:
            <ul id="nav">
            <li class="first"><a href="#">Home</a></li>
            <li class="active"><a href="#">Products</a>
            	<ul>
            	<li class="first"><a href="#">Maecenas</a></li>
            	<li class="active"><a href="#">Phasellus</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li class="last"><a href="#">Mauris at enim</a></li>
            	</ul>
            </li>
            <li><a href="#">Client list</a>
            	<ul>
            	<li class="first"><a href="#">Maecenas</a></li>
            	<li><a href="#">Phasellus</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li class="last"><a href="#">Mauris at enim</a></li>
            	</ul>
            </li>
            <li><a href="#">Case Studies & References</a>
            	<ul>
            	<li class="first"><a href="#">Maecenas</a></li>
            	<li><a href="#">Phasellus</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li><a href="#">Phasellus</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li><a href="#">Phasellus</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li><a href="#">Phasellus</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li><a href="#">Phasellus</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li class="last"><a href="#">Mauris at enim</a></li>
            	</ul>
            </li>
            <li class="last"><a href="#">Locations</a>
            	<ul>
            	<li class="first"><a href="#">Maecenas</a></li>
            	<li><a href="#">Phasellus</a></li>
            	<li><a href="#">Mauris sollicitudin</a></li>
            	<li class="last"><a href="#">Mauris at enim</a></li>
            	</ul>
            </li>
            </ul>


            Your example call:
            [[Wayfinder? &startId=`0` &level=`2` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow` &hereClass=`active` &firstClass=`first` &lastClass=`last`]]


            Your outer template – {{wfOuter}} :
            <ul id="nav">
            [+wf.wrapper+]
            </ul>


            Your inner template – {{wfInner}} :
            <ul>
            [+wf.wrapper+]
            </ul>


            Your row template – {{wfRow}} :
            <li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>


            Add the following CSS to your template:
            <style type="text/css">
            
            /*
            LEGAL
            =====
            Copyright: Daemon Pty Limited 2006, http://www.daemon.com.au
            Community: Mollio http://www.mollio.org $
            License: Released Under the "Common Public License 1.0", 
            http://www.opensource.org/licenses/cpl.php
            License: Released Under the "Creative Commons License", 
            http://creativecommons.org/licenses/by/2.5/
            License: Released Under the "GNU Creative Commons License", 
            http://creativecommons.org/licenses/GPL/2.0/
            */
            
            /* NAV - top horizontal nav */
            #nav, #nav ul {padding: 0;margin: 0;list-style: none}
            #nav {font-weight:bold;height:2.09em;font: bold 96% arial;margin: 0 105px 0 40px}
            #nav li {position:relative;background: #999;float: left;width: 10em;display:block;margin: 0;border-bottom: 3px solid #666;border-right: 3px solid #252525;padding:0}
            #nav a, #nav a:link, #nav a:visited, #nav a:hover, #nav a:active {text-decoration:none;cursor:pointer;color:#fff;display: block;padding: 4px 10px 2px}
            #nav a:hover {color:#000}
            
            #nav li ul {border-left: 1px solid #c00;background: #f6f6f6 url("assets/images/featurebox_bg.gif") no-repeat 100% 100%;width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em}
            #nav li:hover ul, #nav li.sfhover ul {left: 0;z-index:99999}
            
            #nav li li {background:none;float:none;border:none;border: 1px solid #999;border-top:1px solid #fff;border-right:none;border-left:none;padding-left:0}
            #nav li li.last {border-bottom:none}
            #nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {color:#000;padding: 3px 10px 2px;width:14em}
            #nav li li a:hover {color:#fff;background:#c00}
            
            #nav li.active {background: #c00;border-bottom: 3px solid #c00}
            #nav li.active ul {border:none;background: #c00 url("assets/images/featurebox2_bg.gif") no-repeat 100% 100%}
            #nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {}
            #nav li.active a:hover {color:#000}
            
            #nav li.active li {border:none;border-top: 1px solid #c15c5c;border-bottom: 1px solid #870000}
            #nav li.active li.last {border-bottom: none}
            #nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#fff}
            #nav li.active li a:hover {background: #666 url("assets/images/sprites.gif") repeat-x 0 99%;color:#fff}
            
            #nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#fff;font-weight:bold;background: #666 url("images/sprites.gif") repeat-x 0 99%}
            
            <style>


            And finally, add the following three attached images to your assets/images/ folders and it should work just fine. smiley
              Ryan Thrash, MODX Co-Founder
              Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              Quote from: rthrash at Jul 17, 2006, 07:51 PM

              perhaps (and my preference) we should just add a very basic and minimum set of templates hard coded so some output will result.

              I heartily agree with this; in my first trial of it I just wanted a very basic vertical list menu, and couldn’t get one without going through all kinds of chunks and stuff, so I ended up using ListMenuX instead. This looks great for more complex menu situtations where I’ve been using Ditto as a menu, though.
                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
                • 25663 MODX Staff
                • 12,272 Posts
                If we did have some basic defaults in the code, then using extra required parameters virtually disappears. smiley

                It would also make the Mollio custom conversion call look like the following assuming we keep my most recent default commit of "first", "last" and "active", which seem very sensible to me:
                [[Wayfinder? &startId=`0` &level=`2` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow`]]


                One more thing, are we adding newlines (\n, and optionally of course) between template rows?
                  Ryan Thrash, MODX Co-Founder
                  Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                  • 32963
                  • 1,732 Posts
                  Nice work on Wayfinder smiley

                  Just one minor suggestion. How about adding a parameter called &skin, &theme or &gui? This is a feature that I’m that I’m planning to add to some of my snippets.

                  [[Wayfinder? &startId=`0` &skin=`VerticalMenu`]]
                  [[Wayfinder? &startId=`0` &gui=`VerticalMenu`]]
                  [[Wayfinder? &startId=`0` &theme=`VerticalMenu`]]

                  This way users can easily create and share themes with others. The Snippet can be shipped with default themes,skins or guis.

                  The themes could be stored in the assets/snippet/wayfinder as {theme_name}.gui.html

                  Inside the theme file you could do something like:

                  &css=`
                  some css here
                  `
                  &outerTpl=`some code here`
                  &innerTpl=`some
                  code here`

                  Let’s call them skinnable snippets. Another good candidate for this would be the Ditto Snippet
                    xWisdom
                    www.xwisdomhtml.com
                    The fear of the Lord is the beginning of wisdom:
                    MODx Co-Founder - Create and do more with less.
                    • 25663 MODX Staff
                    • 12,272 Posts
                    I like the idea. Does the following logic make sense?

                    1) Base "nothing declared" variables set. Pretty much like it is now.

                    2) Insert a new IF block to check for a theme. If it matches a theme name in the directory, then it uses those variable contained in the theme.

                    3) If there are &params in the snippet call, then let those override any variables from #2.
                      Ryan Thrash, MODX Co-Founder
                      Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                      • 7455
                      • 2,204 Posts
                      Nice but what if I just call it like this? [[wayfinder]] wil it give me a plain unsorted list with a .here class? I hope so.

                      I like snippets that hase lots of options to use like ditto etc but it should work without the parameters. in generating the most basic output without forsing a design or layout.

                      I think it should be this way that when I want to use some nice templates or have custom classes that I have to add them, not that i have to disable them if I just want a simple unsorted list.

                      another thing I saw a couple times is this regclientcss or other regclient stuff is this in the API or is this just php? in a snippet susan made that i changed later called simpleslideshow she used this also but it did not work on my redhead apache server with php4, so if we gonna use somthing like this we must make shure that it always works.

                      Dimmy

                        follow me on twitter: @dimmy01