Menu nav using an image for the main menu

Hi, I am new to Modx, but pretty experienced in CSS/XHTML.

Can someone help me understand how to translate a typical menu into a Wayfinder menu using an image as the background?

In other words, this was created using css and ul classes and I’ve gone through the pdf on Wayfinder, but still was a little lost. I’m guessing it’s fairly simple and just understanding how to connect the Wayfinder menu to the css styles?

See link for example:
http://www.klarsendesign.com/modx/#

Thanks!

This is wayfinder’s way

[[Wayfinder? &startId=`0` &level=`1`]]
More info about wayfinder here

The background image should be applied via CSS

Regarding your example:

It is not good to apply IDs on menu items. Only the first item and last item should be "highlighted" via class attribute
Eg:



This is done with the following Wayfinder call
[[Wayfinder? &startId=`0` &level=`1` &firstClass=`first`]]

Thanks!
I think I am still a little confused.

I’ve got this part: [[Wayfinder? &startId=`0` &level=`1`]]

And that creates a simple unordered list menu... Just words, no style.

But then where is it in Modx and in Wayfinder that I call up the CSS styles?

the easiest way is to add a wrapper



In CSS you do this



If you need to style the first and last element just do this

#mymenu ul li.first {}
#mymenu ul li.last {}

If you want more flexibility have a look at the Template Chunks section from Parameteres tab of the Wayfider documentation

The CSS are in your MODx website template as usual...nothing special really....

cheers/k

Thanks! I tried those things...

If you look at my link: http://www.klarsendesign.com/modx/

The blue dropdown menu I have set-up is just hand coded, not using Wayfinder. It is exactly what I’d like the Wayfinder to look like. Now my difficulty comes in styling the Wayfinder menu, which is the upper menu in just plain text.

**WHERE do I call the styles for Wayfinder to know how to style the menu?

In other words, [[Wayfinder? &startId=`0` &level=`1`]] just creates a basic unordered list. How do I call up the style?

From what I understand, I am supposed to add a Chunk to do this?

Thanks!

You can create chunks for the structure of each part of the menu, and then specify the chunks to use in the snippet parameters. There is a link to a good "cheat-sheet", plus a link to an excellent document on Wayfinder in the wiki http://wiki.modxcms.com/index.php/Wayfinder200

I am sorry to keep asking this question, but it is not working. I’ve attached the image I’m talking about. There is so much documentation that I’m not sure where to even begin as I look through it. Maybe someone can help?

Here’s the code I’ve set up:

THIS is in my Template and creates only a basic ul menu
[[Wayfinder? &startId=`0` &level=`1`]]


And the menu below is what I’d like it to create:
<div id="nav-container">
<ul class="menu">
<li class="blank-nav"><a href="#" rel="tag"></a></li>

<li class="crisis-nav"><a href="#" class="anchorclass" rel="submenu1">The Water Crisis</a>
<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="#">Water</a></li>
<li><a href="#">Sanitation</a></li>
<li><a href="#">Hygiene</a></li>
</ul>
</div>
</li>
<li class="aboutus-nav"><a href="#" class="anchorclass" rel="submenu2">About Us</a>
<div id="submenu2" class="anylinkcss">
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Our History</a></li>
<li><a href="#">Financials</a></li>
<li><a href="#">Financial Partners</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Board of Directors</a></li>
</ul>
</div>
</li>

etc....

My CSS produces the menu that is the nice blue drop-down menu.

What else do I need to do in order to use Wayfinder to fit in with my CSS styles?

Thanks!

You’ve probably figured out an answer by now, but I’m working on a similar problem right now, so I figured I’d post.

This probably won’t be exactly right, but it should go something like this I think.


<div id="nav-container">
<ul class="menu">
[[Wayfinder? &startId=`0` &level=`1`]]
</ul>
</div>

<div id="submenu2" class="anylinkcss">
<ul>
[[Wayfinder? &startId=`??` &level=`2`]]
</ul>
</div>

Where the wayfinder just takes the place of your <li> items.