image & live text based navigation using wayfinder

Hi everyone, so i have a problem and i dont think i can fix it at all,,

i created a site, and built up my two tier vertical navigation using wayfinder, and it all works fine. but now the people i built it for want it to be updated and have provided me with images for the first tier(open and closed) and want the 2nd tier to remain as live text

ie: (if you can imagine the red text are images, blue text are expanded images and black text is live wayfinder generated text)

*********un expanded view**********
About Us
Blog
Help
*******************

**********expanded view*********
About Us
Blog
>archive
>top ten
Help
>contact us
>enquiry form
*******************


now im not really sure if this can be even done using wayfinder in itself or if it will need to be developed by hand, im just hoping to see if anyone has seen/done something like this before, and if so maybe point me in the right direction, not feeling too confident about it at the moment
anyway i appreciate and am greatfull for anyones help

I’ve used images in a wayfinder call so it can be done. You could create two image TVs called [*menuImage*] and [*menuImageActive*] or whatever and apply them to the relevant templates.

Then for the wayfinder call you an use the rowTpl chunks to modify the output. I wanted images for all rows so I used the &rowTpl but you’ll probably need &parentRowTpl and &activeParentRowTpl to match your requirements. I haven’t used these other chunks so you’ll have to play around.


Then for the &rowTpl chunk, call the image TV inside the link.


Alternatively, instead of using two image TV’s, you could just use one image which contains both the normal and the active state then use CSS to move the image when a different class is applied.

For example, I used a thumbnail image with two states, each thumb state has a width of 80px.


I then created two CSS rules, one for each state. When the active class is applied, the image is moved 80px:

Hi bob,,,


ive taken your advice, and have been playing around with the code(on & off) for the past while,,,

would it be possible for you to give me a bit more detail over the way you did your menu with the images
at parent level?

cheers
ddools

OK, take a look at this example menu www.idea-box.co.uk/modx/. I assume this is what your trying to achieve. You can get more information on Wayfinder parameters here www.muddydogpaws.com/development/wayfinder/parameters.html, it explains them better than I could.

First of all, I created two images for each of my top-level menu items, one for the normal state and one for the expanded state. Then I created two template variables to hold each of the image states. One called [*menuImage*] for the normal state image and the other called [*menuImageActive*] for the active or expanded state. For both TVs, I used the following settings - ’Input Type: Image’ and ’Widget: Image’. I then applied each TV to the template my top-level pages use.

The next step was to add my Wayfinder call to my template:
I use three custom template chunk parameters here because Wayfinder doesn’t use images as menu items by default and I need to include the TVs created earlier.

I created a chunk called {{parentImgTpl}} and added the following code:
This chunk is used by a document that is also a container but IS NOT in an active/expanded state. In which case, we include a placeholder [+menuImage+] for the [*menuImage*] TV that holds the normal state image.

Next, I created a chunk called {{parentImgActiveTpl}} and added the following code:
This chunk is used by a document that is also a container and IS currently selected. In which case, we include a placeholder [+menuImageActive+] for the [*menuImageActive*] TV that holds the active state image.

The final chunk parameter &activeParentRowTpl also uses the {{parentImgActiveTpl}} chunk. This displays the active/expanded state image for the parent menu link when one of the sub-level documents is selected.

Does this make it any clearer? I should point out that I’ve only tested this with two levels of navigation. I don’t know how it would look with more levels. Also, because I’ve used the &parentRowTpl parameter in the Wayfinder call, the normal state image will only be applied to top-level documents that have children. If you have any documents without children (the About Us link in your original post?) they won’t have images applied. You’ll have to use some of the other template chunks, perhaps &rowTpl and &innerRowTpl?

thanks very much bob1000 for your detailed response, i really do appreciate your help...

although i had success in the method you recomended i actually ended up gaining 90% success(still can’t get a single element of level2 to be treated as li.last.level2 when there is only one element in level 2, but thats for another day) of what i wanted when i revisited my css file and attached the images through that..

thanks again for your help

ddools