We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 37583
    • 34 Posts
    Hi, I'm starting to build a site in Revolution after usin Evo for a year.
    I have never done 2 level menu (with inner templates) before and now I'm having hard time with it.

    This is a left panel menu which is working fine, only without correct css in nav_sub_supp (inner).

    This is the code MODX is making with Wayfinder. As you see parentRow has missing <li> in the end.
    Any idea what's wrong?

    <div class="col1left_nav">
    <ul class="nav_sub" >
    <li class="parent"><a href="sv/unga/utbildningar/">Utbildningar</a>
    	<ul class="nav_sub_supp" >
    		<li><a href="sv/unga/utbildningar/artesan-finsnickare.html">Artesan - finsnickare</a></li>
    		<li><a href="sv/unga/utbildningar/artesan-interiorsassistent.html">Artesan - interiörsassistent</a></li>
    		<li><a href="sv/unga/utbildningar/automationsmontor-elmontor.html">Automationsmontör - elmontör</a></li>
    		<li><a href="sv/unga/utbildningar/bagare-konditor.html">Bagare - konditor</a></li>
    		<li><a href="sv/unga/utbildningar/batbyggare.html">Båtbyggare</a></li>
    		<li><a href="sv/unga/utbildningar/datanom.html">Datanom</a></li>
    		<li><a href="sv/unga/utbildningar/djurskotare.html">Djurskötare</a></li>
    		<li><a href="sv/unga/utbildningar/elektronikmontor.html">Elektronikmontör</a></li>
    		<li><a href="sv/unga/utbildningar/fordonsmekaniker.html">Fordonsmekaniker</a></li>
    		<li><a href="sv/unga/utbildningar/husbyggare.html">Husbyggare</a></li>
    		<li><a href="sv/unga/utbildningar/kladsommare.html">Klädsömmare</a></li>
    		<li><a href="sv/unga/utbildningar/kock.html">Kock</a></li>
    		<li><a href="sv/unga/utbildningar/kosmetolog-kosmetikradgivare.html">Kosmetolog - kosmetikrådgivare</a></li>
    		<li><a href="sv/unga/utbildningar/kulturmontor.html">Kulturmontör</a></li>
    		<li><a href="sv/unga/utbildningar/landsbygdsforetagare.html">Landsbygdsföretagare</a></li>
    		<li><a href="sv/unga/utbildningar/merkonom.html">Merkonom</a></li>
    		<li><a href="sv/unga/utbildningar/platslagare-svetsare-och-verkstadsmekaniker.html">Plåtslagare - svetsare och verkstadsmekaniker</a></li>
    		<li><a href="sv/unga/utbildningar/rormontor.html">Rörmontör</a></li>
    		<li><a href="sv/unga/utbildningar/servitor.html">Servitör</a></li>
    	</ul>
    </li>
    </ul>
    </div>
    
    
    
    [[!Wayfinder?  &startId=`3` &rowTpl=`rowTpl` &outerTpl=`outerTplSub` &parentRowTpl=`parentRow` &innerTpl=`innerTplSub` &innerRowTpl=`innerRow`]]
    
    
    outerTplSub:
    <ul class="nav_sub">[[+wf.wrapper]]</ul>
    
    innerTplSub:
    <ul class="nav_sub_supp">[[+wf.wrapper]]</ul>
    
    parentRow:
    <li class="parent"><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
    
    rowTpl:
    <li><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
    
    innerRow:
    <li><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
    

    This question has been answered by multiple community members. See the first response.

    • discuss.answer
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      ??? Looks correct to me; the inner UL appears inside of its containing li, that's how nested unordered lists work.
        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
      • discuss.answer
        • 37583
        • 34 Posts
        Actually, now I see it too. There's no missing li!

        What's wrong then?
        • discuss.answer
          • 37583
          • 34 Posts
          The problem was in my CSS. Surprise, surprise. It seems I didn't know how to make nested lists.

          Links (nav_sub_supp) inherited the "uppercase" from outer template (nav_sub). It was my bad, I should have notised that earlier.

          If you have good tutorial links to accordion menu, please share. My inner links are now open and that's not what I want.

          Than you Susan for your help.
            • 28042 ☆ A M B ☆
            • 24,524 Posts
            My favorite list menu tutorials are

            http://www.alistapart.com/articles/taminglists/
            http://www.alistapart.com/articles/hybrid/

            I based the redesign of Evo's top Manager menu on the second tutorial wink

            Another, no-styling or js method is to use the Wayfinder &hideSubMenus parameter to prevent the submenus from being generated unless you're on the submenu's parent page.
              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