How to generate simple menu with wayfinder

43 Posts

santoshmaharjan Reply #1, 15 years, 7 months ago

Hello,

I want the wayfinder to generate menu like this, WITHOUT using unordered list:

Home | About Us | Gallery | Contact Us

I have used the following wayfinder calls:
[!Wayfinder?&startId=`0` &outerTpl =`top_nav_outertpl` &rowTpl=`top_nav_rowtpl`!]

Templates I have created are:
For top_nav_outertpl
[+wf.wrapper+]

For top_nav_rowtpl
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>[+wf.wrapper+] |

I could generate the list without using unordered list, but the problem is, it displays the pipe at the end of the menu too, like
Home | About Us | Gallery | Contact Us |

Is there any method how I can eliminate the pipe from the end of the list?

Regards,

Santosh

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #2, 15 years, 7 months ago

Put the pipe in front of the rest, and call &startItemTpl with another chunk that doesn’t have the pipe.

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.

43 Posts

santoshmaharjan Reply #3, 15 years, 7 months ago

Well, unfortunately I could not get it working. I have used it like you said:

Wayfinder Call:
[!Wayfinder?&startId=`0` &includeDocs=`39,40,41,42` &outerTpl=`top_nav_outertpl` &rowTpl=`top_nav_rowtpl` &startItemTpl=`top_nav_startitemtpl`!]

(Actually I just want to show the docs with above IDs on the top menu, so I have included only those docs here.)

For top_nav_outertpl
[+wf.wrapper+]

For top_nav_rowtpl
| <a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>[+wf.wrapper+]

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

Now it’s showing like this:
| Home | About Us | Gallery | Contact Us

Further help will be highly appreciated.

Regards,

Santosh

43 Posts

santoshmaharjan Reply #4, 15 years, 7 months ago

Further more, if I set &startId=`39`, it does not display anything.

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #5, 15 years, 7 months ago

Startid = 39 will make it find resources under parent 39 - is that what you’re trying to do?

And sorry - I misread the documentation.. that’s not what startItemTpl is supposed to do...

There’s a CSS based solution which involves setting backgrounds on all but the last or first item (through the last/first class: &lastClass / &firstClass).. thought there also was a "regular" one, but I can’t seem to find it sad

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.

43 Posts

santoshmaharjan Reply #6, 15 years, 7 months ago

Resource ID 39 is not a container. So seemingly that’s why it’s not working in my case. I resorted back to 0 and include docs display there.

Please post the css technique if you happen to find. As of now, I will live with that pipe in the front.

Regards,

Santosh

☆ A M B ☆
3,141 Posts

Mark Hamstra Reply #7, 15 years, 7 months ago

This assumes your menu is in an element with ID topnav.

#topnav a {
  background: url('assets/images/divider.png') no-repeat top right;
}
#topnav a.last {
  background: none;
}

Mark Hamstra • Developer spending his days working on Premium Extras and a MODX Site Dashboard with the ability to remotely upgrade MODX and extras to make the MODX world a little better.

Tweet me @mark_hamstra, check my infrequent blog at markhamstra.com, my slightly more frequent ramblings at MODX.today or see code at Github.

43 Posts

santoshmaharjan Reply #8, 15 years, 7 months ago

Thanks a lot. I will try this.

☆ A M B ☆
894 Posts

benmarte Reply #9, 15 years, 7 months ago

If you want to remove the border of the last list item just use the last-child selector


li:last-child{
              border:0px;
             }

Problem is this doesn’t work on all browsers, so the workaround is pretty easy

use something like this


ul{
	list-style:none;
	}

li{
	float:left;
	padding:0 25px;
	border-right:thin solid #000;
	}
	
.none{
	border:none;
	}

Then apply the none class to the last list item.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX