We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 14214
    • 299 Posts
    Hey all, I am trying to sort out how in the world I need to setup and template a MegaMenu. My setup is that I have some parents/folders that need to be single column but I also have a column that needs to be megamenu listing out the children as below:

     	  <li class="menu-item-has-children has-megamenu last-elements">
                  <a href="#">Elements</a>
                  <ul class="submenu megamenu">
                    <li><span>Elements Col 1</span>
                      <ul class="sub-menu">
                        <li>
                          <a href="elements-accordions.html">Accordions</a>
                        </li>
                        <li>
                          <a href="elements-alerts.html">Alerts</a>
                        </li>
                        <li>
                          <a href="elements-buttons.html">Buttons</a>
                        </li>
                        <li>
                          <a href="elements-countdowns.html">Countdowns</a>
                        </li>
                      </ul>
                    </li>
                    <li><span>Elements Col 2</span>
                      <ul class="sub-menu">
                        <li>
                          <a href="elements-grid.html">Grid</a>
                        </li>
                        <li>
                          <a href="elements-icon-boxes.html">Icon Boxes</a>
                        </li>
                        <li>
                          <a href="elements-icons.html">Icons</a>
                        </li>
                        <li>
                          <a href="elements-pricing-tables.html">Pricing Tables</a>
                        </li>
                      </ul>
                    </li>
                    <li><span>Elements Col 2</span>
                      <ul class="sub-menu">
                        <li>
                          <a href="elements-progress-bars.html">Progress Bars</a>
                        </li>
                        <li>
                          <a href="elements-sliders.html">Sliders</a>
                        </li>
                        <li>
                          <a href="elements-tabs.html">Tabs</a>
                        </li>
                        <li>
                          <a href="elements-typography.html">Typography</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
    


    I would love to accomplish this with a single call in either Wayfinder or pdoMenu because those maintaining this project are not the most technical. Appreciate any advice or input you can provide.
      • 3749
      • 24,544 Posts
      I use the Sky MegaMenu at Bob's Guides, but I had to make three separate Wayfinder calls to make it work (One each for the MODX, RV, and Bread sections).
        Did I help you? Buy me a beer
        Get my Book: MODX:The Official Guide
        MODX info for everyone: http://bobsguides.com/modx.html
        My MODX Extras
        Bob's Guides is now hosted at A2 MODX Hosting
        • 44064
        • 185 Posts
        Quote from: jisaac at Apr 12, 2018, 10:08 PM

        I would love to accomplish this with a single call in either Wayfinder or pdoMenu because those maintaining this project are not the most technical. Appreciate any advice or input you can provide.

        Hi,
        here is one example solution for two level menu - two column mega menu will be added for one of menu items:

        1.Menu chunk with pdoMenu call:

        <div class="right-aligned-menu" id="navigation">
        [[pdoMenu? 
            &level=`2` 
            &countChildren=`1`
            &parents=`0`
            &includeTVs=`menuSupport,subMenu`
            &tvPrefix=`wf_`
            &parentClass=`menu-item-has-children `
            &outerClass=`navigation-menu nav`
            &tplOuter=`@INLINE <ul [[+classes]] id="menu">[[+wrapper]]</ul>` 
            &tplInner=`@INLINE <ul class="submenu ">[[+wrapper]]</ul>`
            &tplParentRow=`menuParentRowTpl`
        ]]   
        </div>
        


        2.menuParentRowTpl chunk:

        <li [[+classes]]>
             <a class="dropdown-toggle" data-toggle="dropdown" href="[[+link]]" [[+attributes]]>
                [[+menutitle]]
            </a>
             [[#[[+id]].tv.ShowAsMegaMenu:isequalto=`1`:then=`
                [[$twoColumnList?parent=`[[+id]]`&children=`[[+children]]`]]    
             `:else=`[[+wrapper]]`]]
         </li>
        


        3.ShowAsMegaMenu TV here is applied to any top level menu resource where mega menu is needed.
        4. twoColumnList chunk:

                <ul class="submenu megamenu">    
                    <li class="menu-item-has-children">
                        <ul class="sub-menu">
                        [[pdoResources?
                            &parents=`[[+parent]]`
                            &depth=`1`
                            &tpl=`menuInnerTpl`
                            &select=`{"modResource":"id,pagetitle,alias,uri"}`
                            &limit=`[[+children:add:div=`2`]]`
                            &sortby=`{"menuindex":"ASC"}`
                        ]]
                        </ul>
                    </li>
                    <li class="menu-item-has-children">
                        <ul class="sub-menu">
                        [[pdoResources?
                            &parents=`[[+parent]]`
                            &depth=`1`
                            &tpl=`menuInnerTpl`
                            &select=`{"modResource":"id,pagetitle,alias,uri"}`
                            &offset=`[[+children:add:div=`2`]]`
                            &sortby=`{"menuindex":"ASC"}`
                        ]]
                        </ul>
                    </li>
                </ul>
        


        5. menuInnerTpl chunk
        <li[[+classes]]><a href="[[+uri]]">[[+pagetitle]]</a></li>
          Anton Tarasov
          MODX Developer

          Email: [email protected]
          Web: antontarasov.com