There is something wrong with my menu

84 Posts

bluegum Reply #1, 16 years, 3 months ago

I have a little problem with my Wayfinder call and chunks. The problem is that whenever I test the menu, a part of the horizontal bar appears near the drop down menu. I know that there must be something wrong with my chunks or Wayfinder call. Can someone please have a look at my Wayfinder call and my chunks, and tell me how I can fix it? Thanks in advance.

My Wayfinder call:

[[Wayfinder? &startId=`0` &outerTpl=`my.OuterTplTopMenu` &parentRowTpl=`my.parentRowTpl` &innerRowTpl=`my.InnerRowTpl`]]

my.OuterTplTopMenu Chunk:

<ul id="mainMenu">
    [+wf.wrapper+]
</ul>

my.parentRowTpl Chunk:

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

my.InnerRowTpl Chunk:

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

The Ultimate Website Blog

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 16 years, 3 months ago

&innerTpl
default: NULL
values: name of template chunk
description: The innerTpl template is used as a wrapper for each submenu. If no innerTpl is speciﬁed the
outerTpl is used in its place. Each item processed in the submenu will be inserted into the placeholder
[+wf.wrapper+].
available placeholders: Same as OuterTpl.
example:
<ul[+wf.classes+]>
[+wf.wrapper+]
</ul>

Because you aren’t specifying an innerTpl, it’s using your outerTpl, which has the classname mainMenu. That is given the background image in your CSS. You need an innerTpl without the classname.

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

84 Posts

bluegum Reply #3, 16 years, 3 months ago

Thanks for that, sottwell. That fixed that problem.

I now have a new problem with the same menu. The new problem is when I test the menu, a blank link appears, just underneath the menu button and before the actual menu. Can someone please have a look at what the problem could be, and tell me how to fix it?

This how it looks when I select the source code in my browser:

<li><a href="/index.php?id=5" title="Product Range" >Product Range</a>
<ul>
<li><a href="" title=""></a></li>
<li><a href="/index.php?id=6" title="Bull Wheel Tensioning Units" >Bull Wheel Tensioning Units</a></li>
<li><a href="/index.php?id=7" title="Cable Drum Stands" >Cable Drum Stands</a></li>
<li><a href="/index.php?id=8" title="Crane Erector Borers" >Crane Erector Borers</a></li>
<li><a href="/index.php?id=9" title="Pole Jinker Trailers" >Pole Jinker Trailers</a></li>
<li class="last"><a href="/index.php?id=10" title="Self Loading Cable Trailers" >Self Loading Cable Trailers</a></li>
</ul></li>

Here is my updated code:
Wayfinder call:

[[Wayfinder? &startId=`0` &level=`2` &outerTpl=`my.OuterTplTopMenu` &innerTpl=`my.InnerTpl`]]

my.OuterTplTopMenu chunk:

<ul [+wf.classes+]id="mainMenu">
    [+wf.wrapper+]
</ul>

my.InnerTpl chunk:

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

The Ultimate Website Blog

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 16 years, 3 months ago

That’s because you have the <li> tags in your innerTpl. The innerTpl is only for submenu <ul> tags. It should look just like your outerTpl only without the id attribute. You still need a rowTpl and/or innerRowTpl.

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