(Wayfinder) Menu with and without dropdown in one call?

7 Posts

calvar Reply #1, 12 years, 4 months ago

Hello,

I'm trying to solve the following wayfinder-problem:

My website has ressources which have childs - an ressources without. Therefore I need a menu which provides dropdown menu for some items while at the same time menu items without any dropdown.
I'm using modx revo 2.2.14pl & bootstrap 3.

This is what it should look like:

<ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="[[~3]]">contact</a></li>
    <li><a href="[[~46]]">mail</a></li>
         
    <!-- Menu item with Dropdown -->
    <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">service <b class="caret"></b></a>
         <ul class="dropdown-menu"> 
              <li><a href="[[~4]]">order</a></li> <li><a href="#">order</a></li> 
              <li><a href="#">newsletter</a></li> 
         </ul> 
            
     <li><a href="#">login</a></li>         
</ul>

This is my status right now:

Wayfinder-call:

[[!Wayfinder?
     &startId=`0`
     &outerTpl=`MenuOuter`
     &rowTpl=`MenuOuterRow`
     &innerTpl=`MenuInner`
     ]]

Templates:
MenuOuter:

<ul class="nav navbar-nav">[[+wf.wrapper]]</ul>

MenuOuterRow:

<li [[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

MenuInner:

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

And as expected this is getting me to this output:

<ul class="nav navbar-nav">
        <li  class="first active"><a href="http://xyz.com/" title="Home" >Home</a></li>
        <li ><a href="contact/" title="contact">contact</a></li>
        <li ><a href="mail/" title="mail">mail</a></li>
         
        <li ><a href="service/" title="service">service</a>
            
             <ul class="dropdown-menu">
                  <li class="first"><a href="order.html" title="order">order</a></li>
                  <li ><a href="newsletter.html" title="newsletter">newsletter</a></li>
            </ul>
        </li>
        <li ><a href="login/" title="login">login</a></li>
</ul>

Obviously there's missing a part to the <li>service></li> to make the dropdown-menu working:

<li class="dropdown">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">service <b class="caret"></b></a>

I cant't get a clue to how to solve the problem: only make the "dropdown"-additions to a <li> when there are childs of a ressource, but adding nothing, if there are no childs..

Calvar

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 12 years, 4 months ago

Use parentRowTpl to deal with the ones that are parents, and rowTpl for those that aren't parents. Use innerRowTpl for child items.

Or you can use categoryFoldersTpl, if you put rel="category" in the parent resource's attributes field.

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

7 Posts

calvar Reply #3, 12 years, 4 months ago

Thank you! That got me quite near what I wanted to!

Kind regards,
Calvar

7 Posts

calvar Reply #4, 12 years, 3 months ago

Well - it got me very near, but there's a problem persisting: In each dropdown, the title doesn't work as
Link, and I don't know why...

CSS-Framework: Bootstrap 3
Modx: 2.2.14 pl

That's my Wayfinder-Output:

<div class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
   <li  class="first"><a href="blog/" title="Blog" >Blog</a></li>

   <li class="dropdown"><a href="service/" class="dropdown-toggle" data-toggle="dropdown" title="Service" >Service <b class="caret"></b></a>
         <ul class="dropdown-menu">
              <li  class="first"><a href="order.html"  title="order" >order</a></li>
              <li ><a href="newsletter/"  title="newsletter" >newsletter</a></li>
         </ul>
   </li>
 </ul>
</div>

Clicking on "Blog" delivers my blog-page, clicking on "order" or "newsletter" delivers order.html or the newsletter-page, as expected. But cklicking on "service" doesn't bring me anywhere, though my browser shows "www.myserver/service/" in the browserwindow-footer when hovering over the link.

Does anyone know, why?

Kind regards,
Calvar

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 12 years, 3 months ago

Sounds like something in the Javascript blocking the normal function of the link.

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

7 Posts

calvar Reply #6, 12 years, 3 months ago

point