how to use wayfinder with different child/parent templates - for bootstrap

295 Posts

comp_nerd26 Reply #1, 10 years, 10 months ago

Hi Guys

Im stuck with how I can use wayfinder with bootstrap for sub menus and sub sub menus.

so for example, the menu structure would be:

website - menu 1 - sub menu - sub sub menu

I have done the static code for bootstrap, I just need to create the menu's dynamically from wayfinder

how can i control the outer and inner templates for the sub menu/sub sub menu. or in fact can I control the entire menu system with just one wayfinder statement?

in my static code I have:

        <div id="navbar2" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">menu 1</a></li>
                <li>
                    <a class="dropdown-toggle" aris-expanded="true" aris-haspopup="true" role="button" data-toggle="dropdown" href="#">sub menu click</a>
                    <ul class="dropdown-menu multi-level">
                        <li class="dropdown-submenu">
                            <a href="#" tabindex="-1">sub sub menu click</a>
                            <ul class="dropdown-menu">
                                <li><a href="#">sub sub menu 1</a></li>
                                <li><a href="#">sub sub menu 2</a></li>
                            </ul>
                        </li>
                        [[Wayfinder? &startId=`7`&level=`2`&scheme=`full`]]
                        <li><a href="#">sub menu 1</a></li>
                        <li><a href="#">sub menu 2</a></li>
                        <li><a href="#">sub menu 3</a></li>
                    </ul>
                </li>
                <li><a href="#">menu 2</a></li>
                <li><a href="#">menu 3</a></li>
                <li><a href="#">menu 4</a></li>
                <li><a href="#">menu 5</a></li>
            </ul>
        </div>

notice i am using a small part of wayfinder for the sub menus.

This question has been answered by multiple community members. See the first response.

discuss.answer

295 Posts

comp_nerd26 Reply #2, 10 years, 10 months ago

ive figured this out, no help required. thanks

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 10 years, 10 months ago

It would be nice to post your solution, along with a link to show the final results. Menu solutions are always interesting.

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

discuss.answer

295 Posts

comp_nerd26 Reply #4, 10 years, 10 months ago

ah ok. My solution was:

replaced the original wayfinder code (shown above) with the below:

[[Wayfinder? &startId=`7` &level=`2` &scheme=`full` &innerTpl=`innerTpl` &parentRowTpl=`parentrow` &rowTpl=`rowTpl`]]

chunk innerTpl is:

<ul class="dropdown-menu outer">
[[+wf.wrapper]]
</ul>

parentrow tpl is:

<li class="dropdown-submenu parent">
<a href="#" tabindex="-1">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>

rowTpl chunk is:

<li><a class="btn btn-block" href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a></li>

so Now this shows menu -> sub menu -> sub sub menu correctly. Next we add a little CSS magic to ensure that the menu opens up on hover over. Only problem with that is, in responsive mode, hover wont be available, so Ive had to add some jquery as on .click event to the sub sub menu a link

<a href="#" tabindex="-1">sub sub menu click</a>

the jquery code (not tested yet) could be something like:

$(document).ready({
$('a .class').click({
  $( "ul.dropdown-menu" ).toggle( "slow", function() {
// you will have to get the parent li and find the li>ul, otherwise you would open all dropdown menus    
// Animation complete.
  });
})
})

, which toggles the display against the sub sub menu ul dropdown-menu class.

<ul class="dropdown-menu">
                        <li><a href="#">sub sub menu 1</a></li>
                        <li><a href="#">sub sub menu 2</a></li>
                    </ul>

the overall completed html dom will show:

 <li class="dropdown-submenu">
                    <a href="#" tabindex="-1">sub sub menu click</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">sub sub menu 1</a></li>
                        <li><a href="#">sub sub menu 2</a></li>
                    </ul>
                </li>

I hope this helps somebody out

Answered how to use wayfinder with different child/parent templates - for bootstrap