3 level navigation doesn't work

166 Posts

DNA Reply #1, 15 years, 7 months ago

Didn’t knew there was a wayfinder forum.
I am trying to create a navigation with 3 levels. But i can’t get the tpl’s correct.
i use modx evolution 1.0.5.

My navigation template:

    <ul>
      <li class="first-level"><a class="first-level-item" href="#">Start</a></li>
      <li class="first-level"> <a class="first-level-item current" href="#">MasterSub</a>
        <div class="submenu">
          <div class="shadow-left"></div>
          <div class="submenu-col">
            <ul>
              <li> <a href="#"><strong>Sub1</strong></a>
                <ul>
                  <li><a href="#">subshub 1</a></li>
                  <li><a href="#">subshub 2</a></li>
                  <li><a href="#">subshub 3</a></li>
                </ul>
              </li>
                <li><a href="#"><strong>Sub2</strong></a></li>
                <li><a href="#"><strong>Sub3</strong></a></li>
            </ul>
          </div>
          <div class="shadow-right"></div>
          <div class="shadow-bottom">
            <div class="shadow-corner-left"></div>
            <div class="shadow-bottom-middle"></div>
            <div class="shadow-corner-right"></div>
          </div>
        </div>
      </li>
    </ul>

I have tried everyting with ParentRow, Inner and Innerrow, but it doesn’t work.

When i set these parameters:
Parentrow tpl

<li class="first-level"><a class="first-level-item" href="[+wf.link+]"  title="[+wf.title+]">[+wf.linktext+]</a>

  [+wf.wrapper+]

</li>

Outer tpl

  <ul>
    [+wf.wrapper+]
  </ul>

Row Tpl

<li class="first-level"><a class="first-level-item" href="[+wf.link+]"  title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Inner Tpl

<div class="submenu">
            <div class="shadow-left"></div>
            <div class="submenu-col">
<ul>
  [+wf.wrapper+]
</ul>
            </div>

            <div class="shadow-right"></div>

            <div class="shadow-bottom">
              <div class="shadow-corner-left"></div>
              <div class="shadow-bottom-middle"></div>
              <div class="shadow-corner-right"></div>
            </div>
          </div>
</li>

InnerRow tpl

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

I get this as output:

<ul>
  <li class="first-level"><a class="first-level-item" href="#"  title="Start">Start</a></li>
  <li class="first-level"><a class="first-level-item" href="#"  title="Mastersub">Mastersub</a>
    <div class="submenu">
      <div class="shadow-left"></div>
      <div class="submenu-col">
        <ul>
          <li class="first-level"><a class="first-level-item" href="#"  title="Sub1">Sub1</a>
            <div class="submenu">
              <div class="shadow-left"></div>
              <div class="submenu-col">
                <ul>
                  <li> <a href="#"  title="subsub 1"><strong>subsub 1</strong></a></li>
                  <li> <a href="#"  title="subsub 2"><strong>subsub 2</strong></a></li>
                  <li> <a href="#"  title="subsub 3"><strong>subsub 3</strong></a></li>                                    
                </ul>
              </div>
              <div class="shadow-right"></div>
              <div class="shadow-bottom">
                <div class="shadow-corner-left"></div>
                <div class="shadow-bottom-middle"></div>
                <div class="shadow-corner-right"></div>
              </div>
            </div>
          </li>
          <li> <a href="#"  title="Sub2"><strong>Sub2</strong></a></li>
          <li> <a href="#"  title="Sub3"><strong>Sub3</strong></a></li>
        </ul>
      </div>
      <div class="shadow-right"></div>
      <div class="shadow-bottom">
        <div class="shadow-corner-left"></div>
        <div class="shadow-bottom-middle"></div>
        <div class="shadow-corner-right"></div>
      </div>
    </div>
  </li>
</ul>

- 150 Posts
goonz39 Reply #2, 15 years, 4 months ago

Did you fix this yet?
"Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein
- 793 Posts
ottogal Reply #3, 15 years, 4 months ago

You have three nested [tt]ul[/tt] elements in your output, and I understand that you want to surround only the second one by the shadows (that is, the [tt]Sub[/tt] menu, but not the [tt]subshub[/tt] menu).

The problem is, that the [tt]&innerTpl[/tt] is used
for all the submenus, no matter how deeply nested
(says the documentation).

You could try to use nested Wayfinder calls:

Your [tt]&innerTpl[/tt] should just contain another Wayfinder call for which you define a [tt]&startItemTpl[/tt] containing the shadow stuff (You have to set [tt]&displayStart=`1`[/tt] too). This inner Wayfinder has to build the nested [tt]ul[/tt] lists [tt]Sub[/tt] and [tt]subshub[/tt].
Chosing the right parameters for it will certainly be a bit tricky...
- 561 Posts
samba Reply #4, 15 years, 4 months ago

To amplify Otto’s point, you can also use &levelClass to get different styling on every level if desired. Of course, that would require some corresponding CSS.

http://muddydogpaws.com/development/wayfinder/parameters.html
MODx and Wordpress development
Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4
- 128 Posts
Zuriel Reply #5, 15 years, 1 month ago
since this has been a while I am not sure if this response is deemed neccasary. but you can specify a template like this

&parentRowTpl=`menuParents`

then make your menuParents chunk like this:
```
[[+wf.level:is=`1`:then=`<li>
	  <a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>
	    [[+wf.wrapper]]
	 </li>`:else=`
	<li class="[[+wf.classes]]"><a href="#">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
		`]]
```
what this does is checks for level =1 (main menu TOP LEVEL) and if it is level 1 you can do a template for level 1.

if your NOT level 1, aka submenu parents (like submenu 2 but has a level 3 dropdown on a submenu, it does a second template specifically for that)

basically adds a subMenuParent functionality with only 1 template