Wayfinder Menu Help...

21 Posts

5ink Reply #1, 19 years ago

Hi

Hope you guys can help... I’m trying to use wayfinder to have a graphic based main menu with different sized buttons (varying in width) and then use wayfinder to dynamically generate the drop down css based menus. Have any of you tried this and had success? Please see my attached jpeg of the menu I am trying to build, I already have it coded and working just trying to integrate it into modx with wayfinder.

Also if its not possible with wayfinder, please let me know

.

Thanks for your time.

788 Posts

jesster444 Reply #2, 19 years ago

It can be done in Wayfinder, but to help, we will need to know the HTML output necessary to create the menu to help you template it in Wayfinder. As an example, this CSS drop down menu was done with Wayfinder:

http://cmssandbox.com/MODx095/

Jesse R.
Consider trying something new and extraordinary.
Illinois Wine

Have you considered donating to MODx lately?
Donate now. Every contribution helps.

21 Posts

5ink Reply #3, 19 years ago

Thanks for your reply...

Here is my beta version just strait html & css...

http://5ink.com/beta

Thanks for your help so far.

788 Posts

jesster444 Reply #4, 19 years ago

You are likely going to want something like this:

[!Wayfinder?startId=`0` &outerTpl=`nav_outerTpl` &rowTpl=`nav_rowTpl` &parentRowTpl=`nav_parentRowTpl` &innerRowTpl=`nav_innerRowTpl` &innerTpl=`nav_innerTpl`!]

Then create the following chunks:

nav_outerTpl:

<div class="web-design-menu">
[+wf.wrapper+]
</div>

nav_rowTpl:

<li>
                <a href="[+wf.link+]" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('[+wf.linktext+]','','navimages/[+wf.linktext+].gif',1)"><img src="navimages/[+wf.linktext+].gif" alt="[+wf.title+]" name="[+wf.linktext+]"></a><br>[+wf.wrapper+]           
                </li>

nav_parentRowTpl:


 <li>
                <a href="[+wf.link+]" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('[+wf.linktext+]','','navimages/[+wf.linktext+].gif',1)"><img src="navimages/[+wf.linktext+].gif" alt="[+wf.title+]" name="[+wf.linktext+]"></a><br>
              		<ul>
   [+wf.wrapper+] 
				  </ul>                
                </li>

nav_innerTpl:

[+wf.wrapper+]

nav_innerRowTpl:

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

That should get you close, but I have not tested it. Just place that code in and check the output and tweak as necessary. Obviously you can change the directory I called "navimages’ and for this method to work the images have to be named according to what the [+wf.linktext+] outputes, which defaults to "menutitle."

Jesse R.
Consider trying something new and extraordinary.
Illinois Wine

Have you considered donating to MODx lately?
Donate now. Every contribution helps.

21 Posts

5ink Reply #5, 19 years ago

Hi Jesster,

Just wanted to say thanks for your help on this, works perfectly now, much appreciated! I wish I could say I understood exactly what you did but it required very minor tweaking huh

Thanks for the great support.

John

21 Posts

5ink Reply #6, 19 years ago

More Wayfinder Questions?

I’m trying to get the subpages to show up like I have it setup on my html page here: http://5ink.com/beta/subpage.html

I’d like the subpages to be automatically generated on the left with wayfinder styled like I have them in the link above, is this possible?

Thanks Again
John

4,205 Posts

dev_cw Reply #7, 19 years ago

That will be no problem, just add another wayfinder call where you want the submenu and change the outertpl and the rowtpl. The great thing with wayfinder is that so much freedom is built in that with a few modifications to the tpl you can get almost any outcome you want.

The developer’s site has some great documentation.
http://www.muddydogpaws.com/development/wayfinder/features.html

Oh, for the submenu you might want to look into the AbsoluteParent or the SctionRoot Snippets to automatically set the the id for the current section parent.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

21 Posts

5ink Reply #8, 19 years ago

Thanks your tip, worked perfect! Took me a little while to figure out but I’m not used to content management systems in general so it takes me awhile.

Thanks again both of you for your great support! I’m sure I’ll have more questions soon. huh

21 Posts

5ink Reply #9, 19 years ago

Hey guys sorry to ask another q? but I am working on the "&heretpl" statement everything works great in the top image navigation, but when I’m on an actual subpage thats in the drop down, the image button from the top menu trys to appear on the drop down. Is this a bug? Is it possible to fix?

Heres the page I’m working from right now, to see an example: mouseover "web design" to drop down the menu in the top left. You’ll see the broken image shows up in the drop down.

Also shouldn’t the "web design" button still be in the "&hereTPL" state when one of its subpages is being viewed?

http://5ink.com/55

Thanks for your help guys!

Best,
John

4,205 Posts

dev_cw Reply #10, 19 years ago

I am not sure if I understood your specific problem, but I did find a few issues in your code.

1) I think what is causing the unwanted space between the menu items is a markup error caused by an extra <ul></ul> block in the drop menu code, this is most likely caused by an extra wrapper call for sub-sub-menus:

<ul>
   <li>
<a href="/55">
<img src="web-design-img/Web Design Subpage-o.gif" alt="Web Design Subpage" name="Web Design Subpage" border="0"></a><br>
<ul>
    
</ul>         

</li>

<li><a href="/test" title="Test 2">Test 2</a></li>
 
</ul>                
</li>

2) In the sub menu you have an extra <div>. You can either remove it from the outertpl chunk or from the template:

<div class="subpage-menu">
<div class="subpage-menu">
<a href="/55" title="Web Design Subpage" class="subpage-menu-button-over">Web Design Subpage</a>
<a href="/test" title="Test 2" class="subpage-menu-button">Test 2</a>

</div>
        </div>

3) I noticed that you are using javascript to control the image rollover (i would recommend using a pure css method, but this could be some extra work). If you want to have the button selected you could just do a simple call to the on state of the button in the heretpl, no need for the js.

By the way, it always helps to point out the browser that you are using since there are many IE css issues that need special treatment.

I am on Firefox on MacOSX.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]