(SOLVED) Help needed with wayfinder menu layout, I'm close but...

8 Posts

lalala Reply #1, 17 years, 4 months ago

Hello,

Been reading The_almost_Complete_Guide_to_Constructing_Menus_in_MODx_Using_Wayfinder.pdf. Which is great, many thanks to Kongondo. I get wayfinder a lot more.

Got very close to what I want to do but just can’t seem to get the exact thing I require.

I’ve built a horizontal menu with drop-downs using Spry in Dreamweaver. There’s a class on the main link of each top level menu item which opens the drop-down. What I’m trying to do is apply that class to that top-level link only. Here’s the code

<ul id="MenuBar1" class="MenuBarHorizontal">
                          <li><a href="index.html">TOP LINK 1</a></li>
			  <li><a class="MenuBarItemSubmenu" href="xxxxxxx.html">TOP LINK 2</a>
          <ul>
			        <li><a href="xxxxxxx.html">Sub-link 1</a></li>
			        <li><a href="xxxxxxx.html">Sub-link 2</a></li>
			        <li><a href="xxxxxxx.html">Sub-link 3</a></li>
                                <li><a href="xxxxxxx.html">Sub-link 4</a></li>
			        <li><a href="xxxxxxx.html">Sub-link 5</a></li>
			        
		        </ul>
		      </li>
			  <li><a class="MenuBarItemSubmenu" href="xxxxxxx.html">TOP LINK 3</a>
              <ul>
			        <li><a href="xxxxxxx.html">Sub-link 1</a></li>
			        <li><a href="xxxxxxx.html">Sub-link 2</a></li>
			        <li><a href="xxxxxxx.html">Sub-link 3</a></li>
		        </ul>
              </li>
</ul>

Here’s my wayfinder call

[!Wayfinder?startId=`0` &outerTpl=`menuContainer` &level=`2`!]

Here’s my chunk menuContainer

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="[+wf.link+]" class="MenuBarItemSubmenu">[+wf.linktext+]</a>[+wf.wrapper+]</li>
</ul>

This is what gets generated

<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="" class="MenuBarItemSubmenu"></a><li class="active"><a href="http://www.xxxxxxx.net/modx/" title="xxxxxxx" >TOP LINK 1</a></li>
<li><a href="/modx/index.php?id=47" title="xxxxxxx" >TOP LINK 2</a>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="" class="MenuBarItemSubmenu"></a><li><a href="/modx/index.php?id=48" title="xxxxxxx" >Sub-link 1</a></li>
<li><a href="/modx/index.php?id=49" title="xxxxxxx" >Sub-link 2</a></li>
<li><a href="/modx/index.php?id=50" title="xxxxxxx" >Sub-link 3</a></li>
<li><a href="/modx/index.php?id=51" title="xxxxxxx" >Sub-link 4</a></li>
<li class="last"><a href="/modx/index.php?id=52" title="xxxxxxx" >Sub-link 5</a></li>
</li>
</ul></li>
<li><a href="/modx/index.php?id=53" title="xxxxxxx" >TOP LINK 3</a><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="" class="MenuBarItemSubmenu"></a><li><a href="/modx/index.php?id=54" title="xxxxxxx" >Sub-link 1</a></li>
<li><a href="/modx/index.php?id=55" title="xxxxxxx" >Sub-link 2</a></li>
<li class="last"><a href="/modx/index.php?id=56" title="xxxxxxx" >Sub-link 3</a></li>
</li>
</ul>

As you can see id="MenuBar1" class="MenuBarHorizontal" is being applied to all ul items rather than just the outer one. class="MenuBarItemSubmenu" is being applied to the first top link which has no drop-down.

Any suggestions? Can it even be done?

Many thanks in advance.

1,390 Posts

kongondo Reply #2, 17 years, 4 months ago

Lalala,

I would suggest re-reading the book wink

One of the things mentioned in the book and in WF’s developement home is that if no innerTpl is specified the outerTpl is used in its place. That is what is happening in your case. So, for your sub-menu items containers, you will need to create and specify an innerTpl. This can be the same as the outerTpl EXCEPT for the id part. Since it will be applied multiple times, you don’t need an id, you need a class.

Secondly, I think you will need to modify your outerTpl - in your code, you have included <li> tags in the outerTpl. You really don’t need them since those tags are what will be generated by your row level templates, e.g. rowTpl. So, you should probably have something like below for your outerTpl

<ul id="MenuBar1" class="MenuBarHorizontal">[+wf.wrapper+]</ul>

If you wish, you can apply the class MenuBarHorizontal directly to the <li> instead by appropriately creating a rowTpl.

Thirdly, for your sub-menu items, if you wish, you can use an innerRowTpl

Cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

8 Posts

lalala Reply #3, 17 years, 4 months ago

Re-read the book. Ha ha laugh

You’re probably right!

I’ve added an innerTpl now and modified the outerTpl. That’s worked!

I’ve created a rowTpl

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

and modified the wayfinder call

[!Wayfinder?startId=`0` &outerTpl=`menuContainer` &innerTpl=`menuInner` &rowTpl=`row` &level=`2`!]

It’s nearly working apart from the fact that the class MenuBarItemSubmenu has been applied to every row. How do you just apply it to the first list item i.e. the main menu item?

1,390 Posts

kongondo Reply #4, 17 years, 4 months ago

It’s nearly working apart from the fact that the class MenuBarItemSubmenu has been applied to every row. How do you just apply it to the first list item i.e. the main menu item?

Create an innerRowTpl - this can be similar to the rowTpl (without the class you don’t want, of course) - and specify it in your WF call. The rowTpl will be applied to first level items and the innerRowTpl will be applied to 2nd, 3rd, etc, level items.

cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

8 Posts

lalala Reply #5, 17 years, 4 months ago

Ahh I see the logic. That’s the ticket! It works!

Many thanks.