How do I split pdoMenu so that the nav menu can have a left side and a right side?

1,078 Posts

mmcgee Reply #1, 11 years, 7 months ago

I am working with Foundation 5 TopBar navigation menu all is functioning perfectly with pdoMenu.

TopBar has the option of a ul left class and a ul right class. I've built my menu using the right class, but would like to have one parent item and all its children to appear on the left side of the menu.

<ul class="right">
    [[+wf.wrapper]]
</ul>

<ul class="left">
   ? ? ?
</ul>

How to I get pdoMenu to omit the resource parent I want from the right, and then include it on the left.

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 11 years, 7 months ago

You should probably exclude that resource from the first pdoMenu snippet, then use a second pdoMenu snippet to just use that resource, using &displayStart and &tplStart.

If it is the last item in the menu, you might be able to just move that li element to the position you want, using absolute positioning in the 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

1,078 Posts

mmcgee Reply #3, 11 years, 7 months ago

Hi Susan:

Thanks for responding. This parent item at the moment is the last, but certainly could be changed to be the first item. Either way, targeting seems like a sound approach. This is a responsive menu, so there is a ton of css and js that drives it. The positioning is done with the ul class of left and right. Thus, I am reluctant to mess with the existing structure by trying to position a stray nav menu item.

I have pdoMenu working with only two tpl chunks. I call them simply inner and outer and the menu functions great. With other menus, I remember having 4 chunks, but with the foundation 5 menu, these two chunks seem to do the trick—except for the left and right thing:)

innerTpl

<!-- nav_main_innerTpl -->
<ul[[+wf.classes]]>
    [[+wf.wrapper]]
</ul>

outerTpl (ignore the title area ul, it's hard coded, and doesn't need to be a part of the pdoMenu)

<nav [[+wf.classes]] data-topbar data-options="mobile_show_parent_link: true">
    <ul class="title-area">
        <!-- Title Area -->
        <li class="name"><p>PROPERTIES</p></li>
        <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon">
            <a href="#"><span></span></a>
        </li>
    </ul>
 
    <section class="top-bar-section">
        <ul class="left">
            THIS IS WHERE I WANT ONE OF THE PARENT ITEMS (and children) to be placed
        </ul>

        <ul class="right">
            [[+wf.wrapper]]
        </ul>
    </section>
</nav>

1,078 Posts

mmcgee Reply #4, 11 years, 7 months ago

Might help if I supply my snippet call.

[[pdoMenu?
&startId=`0`
&level=`3`
&outerTpl=`nav_main_outerTpl`
&innerTpl=`nav_main_innerTpl`
&outerClass=`top-bar`
&innerClass=`dropdown`
&parentClass=`has-dropdown`
]]

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 11 years, 7 months ago

Personally, I'd go with two pdoMenu snippets, the main menu excluding the parent you don't want in the right menu, and specifying it as the only parent in the left menu.

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

1,078 Posts

mmcgee Reply #6, 11 years, 7 months ago

Yes. That is the direction I am working on. Will post back successful results later on today I hope.