We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 41570
    • 6 Posts
    Hello all,

    I am building out a new site and working with NLSMenu JS library to build it an make it look prettier than I can do.. smiley The trick for me here is that it requires all levels ul/li to have unique id's. This is where I have become lost.

    Specifically, I am really struggling with trying to get a unique value at the ul innerTPL level. the innerClass="level" works great and is exactly what I need but again at the ul innerTPL spot. I have spent days searching for the solution and finally, just figured either I am really loosing it and looked right at the answer and dont get it, or its simply WAY over my head to grasp, so heck ask the experts here.. smiley

    Here are specifics on my setup;

    MODX Revolution 2.2.4-pl (traditional)
    Wayfinder 2.3.3

    Wayfinder call
    [[!Wayfinder? &startId=`0` &outerTpl=`menuOuter` &rowTpl=`menuRow` &innerTpl=`menuInner` &innerRowTpl=`menuInnerRow` &hereClass=`current_page_item` &firstClass=`` &lastClass =`` &levelClass=`level` &innerClass=`submenu` &rowIdPrefix=`m` ]]
    


    TPLs Being used are noted above, if you need to me insert them, I certainly can however they are very basic and working great with the exception of this unique item..

    Thank you so much for any direction you can provide..

    -Roland
    • &rowIdPrefix default: FALSE
      values: name of prefix
      description: If this parameter is set, Wayfinder will replace the placeholder [+wf.id+] with a unique id consisting of the specified prefix plus the document id.
      example: &rowIdPrefix=`topMenu` will output the following for doc # 29: id="topMenu29"
      You will need to have custom rowTpl and innerRowTpl chunks with the [[+wf.id]] placeholder added. Just copy the default tpls and add the placeholder where you need it, in the li tags or the a tags.
        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
        • 41570
        • 6 Posts
        Thanks for the response however, I saw this and thought it only worked at the li level and I must have it at the ul subs.. I could be totally lost as I mentioned though so here is what I have for my current TPLs.. smiley

        menuOuter <-- works fine
        <ul id="main">[[+wf.wrapper]]</ul>
        


        menuRow <-- works fine
        <li [[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></a>[[+wf.wrapper]]</li>
        


        menuInner <-- this is where I need the id="classnamesUNIQUE"
        <ul id="[[+wf.classnames]]">[[+wf.wrapper]]</ul>
        


        menuInnerRow <-- works fine with level class used
        <li[[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></a>[[+wf.wrapper]]</li>
        


        Again here is my wayfinder call
        [[!Wayfinder? &startId=`0` &outerTpl=`menuOuter` &rowTpl=`menuRow` &innerTpl=`menuInner` &innerRowTpl=`menuInnerRow` &hereClass=`current_page_item` &firstClass=`` &lastClass =`` &levelClass=`level` &innerClass=`submenu` &rowIdPrefix=`m` ]]
        


        Thanks again for the response and I hope this helps if I was unclear..

        -Roland
          • 41570
          • 6 Posts
          I NOTICED THIS WAS TRIMMED

          menuInner <-- this is where I need the id=UNIQUEID with classname
          • Would the &levelClass help?
            default: NULL
            values: name of class
            description: The levelClass will be applied to each item denoting each items level, the level number will be added to the specified class (i.e. level1, level2, level3, etc...)
              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
              • 41570
              • 6 Posts
              The &levelClass=`level` works great for the li elements but I need it to be applied on the submenu ul elements and thats where the &innerClass=` ` works, but again it only adds whatever I put it unlike the levelClass thats counts up..

              So for example here is what I have..

              <div id="menu_container" style='display:none'>
              <div class="nav_block">
              
              <ul id="main">
              <li  class="level1"><a href="#" title="" ><span>Home</span></a></li>
              <li  class="level1"><a href="#" title="" ><span>About</span></a>
                   <ul id=" "> <--- THIS IS WHERE innerClass works but I must have unique anything here..??
                        <li class="level2"><a href="#" title="" ><span>Overview</span></a></li>
                   </ul>
              </li>
              


              hope that helps.. I simply cannot imagine this is not doable so until I hear otherwise, I am going to blame my total numbness to it.. smiley

              thanks again..
              • I am not aware of such an ability.

                You could fake it, however, by setting the &rowIdPrefix to something like 'column', and in your CSS using something like
                #column1 ul{background:green;}
                #column2 ul{background:yellow;}
                #column3 ul{background:red}

                where the columnxx numbers would be those of your top-level row items. You could use an innerRowTpl that doesn't include the wf.id placeholder so they would only appear in the top-level items if you want to avoid cluttering up the rest of the menu items with unneeded id attributes.
                  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
                  • 5904
                  • 58 Posts
                  @ringmaster

                  Hi Roland, Did you find a solution to this? I'm facing the same issue. See my post here:

                  http://stackoverflow.com/questions/18580518/modx-revo-wayfinder-3rd-level-ul-different-to-2nd-level-ul

                  Any help greatly appreciated!

                  Craig
                  • I would simply use CSS:
                    ul {top level css...}
                    ul ul {second level css ...}
                    ul ul ul {third level css...}
                      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
                      • 41570
                      • 6 Posts
                      Hey Craig, I am sorry to report that I did not. I ended up just dropping the nls as an option. The suggestion from sottwell may work just fine though.. Sorry I do not have the solution, best of luck in your chase for it though... -Roland


                      Quote from: craigphiz at Sep 04, 2013, 11:18 AM
                      @ringmaster

                      Hi Roland, Did you find a solution to this? I'm facing the same issue. See my post here:

                      http://stackoverflow.com/questions/18580518/modx-revo-wayfinder-3rd-level-ul-different-to-2nd-level-ul

                      Any help greatly appreciated!

                      Craig