On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • 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.
    • 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
      • 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: contact@antontarasov.com
          Web: antontarasov.com