Horizontal Menu

Hi there,

I am loving Modx. I think its the best CMS system by far and I’ve looked around at quite a few. I am trying to find the easiest way to create a dynamic horizontal menu. I had a look at http://www.positioniseverything.net/css-dropdowns.html . That works very well but how do you customize it to include "internal links", i mean modx links to automatically generate. Also, does anyone have a customized menu that we can simply modify instead of going through the large learning curve just for the menu?

Thanks for a great product and I hope I can have it customized to our needs soon.

Richard

Get Wayfinder from the repository. Lots of good examples with it.

The repository in general is a good place to being searching for resources and examples.

The current wayfinder archive does not contain any examples, but you can find them in this file (don’t use the snippet code though, its old)

Hi Guys,

I downloaded the files you said. I see CSS samples and I see the documentation. I want to use the ultimate_drop.css for my menu
The documenation says to use a chunk at the bottom of the file. I have copied that portion to a file named "menuchunk". Now I’m stuck!
How do you configure the css and where do you actually place all the different pieces of code? Is there not an example template with everything in it for a newbie like me?

The Document says to asssign a css to each parameter. Where is this defined? :

&firstClass CSS class denoting the first item at a given menu level none
&lastClass CSS class denoting the last item at a given menu level last
&hereClass CSS class denoting the "you are here" state all the way up the chain here

Which ones do you need to assign to get this thing working?

What is the easiest way to actually get this menu to a point where I can fine-tune the layout and colours?

thank you

Quote from: richardjjj at Oct 08, 2006, 05:15 AM

The documenation says to use a chunk at the bottom of the file. I have copied that portion to a file named "menuchunk". Now I’m stuck!

How do you configure the css and where do you actually place all the different pieces of code? Is there not an example template with everything in it for a newbie like me?

You are not supposed to copy anything to any file. You need to create new Chunks in MODx manager with the names and content that is described in chunks.txt file. For the revisited menus that are listed in the template_revisited.html you only need the one chunk at the end of chunks.txt. So create the wfParentRow chunk and then use the snippet call that is in template_revisited.html. Then copy the ultimate_drop.css file somewhere on your webserver and include it to your template.

Other way to quickly test the menus would be to copy the wayfinder folder to assets/templates, then create all the chunks that are in chunks.txt. Then create templates from the contents of template.html and template_revisited.html and by changing the css files that are included to the template you can change the menu type. Possible values are listed in the templates.

Hi Doze,

I have followed those steps and managed to get a listing of navigation but no dropdown css. Regarding the css file, I copied the contents of the template_revisted css and pasted that into a new template. Then, within a new document I chose to use this new template and then pasted the snipped call : [!Wayfinder? &startId=`0` &level=`4` &parentRowTpl=`wfParentRow`!] in the content of the text. When I display the page I get the list of menu items but no css. The strange thing is that when I try another css file it reads it and formats the page accordingly so I know its not a path problem. What am I not doing? Am I meant to be putting anything else in the template apart from the css in the template_revisited file?

thanks again.

To be honest, there are no examples at all in the documentation in Wayfinder. Nothing about howe things really works. There are only examples for those who allready understand how Wayfinder works. Not for the rest of us who still have to find out things from the wery beginning.

This is a great community, and there is a lot of great help to get, an I will stay with ModX for my new site, but for this one it seem to be hard to get the right answers. I do know CSS, XHTML, some PHP, snippets, chunks, TVs and so on. But Wayfinder

So please, any of you who allready know this, write down a detailed step to step tutorial for howe to set up a menu. I am not asking for help to make all of my own menues. Just help to get me over the edge. There will be a lot of greatfull users around.

(The same question here.

Quote from: richardjjj at Oct 09, 2006, 03:46 AM

I have followed those steps and managed to get a listing of navigation but no dropdown css. Regarding the css file, I copied the contents of the template_revisted css and pasted that into a new template. Then, within a new document I chose to use this new template ...

Did you copy the css file/files that you are using from the archive to your webserver in assets/templates/wayfinder folder? The template looks for the css file in assets/templates/wayfinder/flyout_revisited.css for example. The older menus that are listed in template.html needs 2 css files and the newer 1.

Quote from: Sylvaticus at Oct 09, 2006, 05:23 AM

(The same question here.

Kyle has answered to that question, go look if it helps..

Did you copy the css file/files that you are using from the archive to your webserver in assets/templates/wayfinder folder? The template looks for the css file in assets/templates/wayfinder/flyout_revisited.css for example. The older menus that are listed in template.html needs 2 css files and the newer 1.

Yes I did this. I tried putting another css file in there to format the linktext and it reads it perfectly but it just wont read the css that comes within the file. Is there anything else I need to add to the css file? My test template looks like this:

<html>
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>Test</title>
<link type="text/css" rel="stylesheet" href="http://localhost/modx/assets/templates/wayfinder/ultimate_drop.css"/>
</head>
<body>

<div align="center">[*content*]</div>
</body>
</html>

And my document contains only this:

[!Wayfinder? &startId=`0` &level=`4` &parentRowTpl=`wfParentRow`!]

Does this look fine to you? Am I meant to have 4 levels of links deep for it to work? I read through kyle’s post - no luck either

thanks for your time

Looks right to me, if you access that css url what is in your template, is the file there? (eg. http://localhost/modx/assets/templates/wayfinder/ultimate_drop.css)