MegaMenu Bites Again

299 Posts

jisaac Reply #1, 6 years, 9 months ago

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.

24,544 Posts

BobRay Reply #2, 6 years, 9 months ago

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

185 Posts

Anton Tarasov Reply #3, 6 years, 9 months ago

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