Complicated menu system

Just wondering how the above could be implemented using modx. I need to try and get the main button (rounded corners) to change colour depending on the section and then have sub menu links directly underneth relating to that particular section.

Thanks
Lee

Hi,

I guess you should have a look to this article from ALA --> http://alistapart.com/articles/hybrid
the final result --> http://alistapart.com/d/hybrid/hybrid-4.html

:-)

Well, with wayfinder you can put a unique id to your list items with &rowIdPrefix=`someprefix`. So in that case you could define the list (outer template) like <ul id="topnav "[+wf.classes+]>[+wf.wrapper+]</ul> and (inner template) <li[+wf.id+][+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li> (see documentation). I am not sure if wayfinder adds it to the ul-declaration, but it should So you can define all your topnav links with ul.topnav li/ul.topnav li a and your special colors with ul.topnav li#someprefix5 a { for the special colors. For the colored bar at the bottom you can either include an extra Stylesheet via TV and put there the color definitions for this DIV or.... there are several possibilities depending on how your structure will be.

Cheers,
Marc

CSSPlay dropline menu is pretty close I think (http://www.cssplay.co.uk/menus/dd_valid_2.html).. it’s included in Wayfinder as a example. Just need to change the main items to have images and change background colors depending on selected item. You could use &rowIdPrefix parameter in the snippet call and add it to the templates to get individual ID’s for the menu items and then modify the css to use those id’s to alter the hover bg colors/images..

Great advice all. Gonna try that CSSPlay example. As always great advice.

Thanks
Lee

As a newbie, is there any documentation on how to get started with Wayfinder and implement the CSSPLAY menu?

Thanks
Lee

In wayfinder archive, there is a folder "cssplay". From that folder, open chunks.txt and create the chunks wfOuter, wfInner, wfParentRow and wfRow from the codes respectively. Then add the following wayfinder call to your template (what can be found in the template.html)



Then decide what type of menu you want to use. The menus icluded are: basic dropdown menu, multi level dropdown menu, dropline menu, flyout menu and pull-up menu. You probably want to go with the dropline menu. To do that, include it’s CSS files to your template. Each of the menus have 2 CSS files, one for IE (what is loaded in IE conditionals) and one for other browsers. So to get dropline menu, ftp the css files dropline.css and dropline_ie.css over to your template folder on the server and include them:



And that’s it. Then add the &rowIdPrefix parameter to Wayfinder call and start modifying the CSS files..

Thats helps loads. Thanks for that

Lee

I once use ultimate parent to select a css based on the id so if your sections are id 1,2,3,4 then i made 4 css files that holds the colors for the active class and call the stylsheet 1.css, 2.css, 3.css, 4.css.

then link this in your template like this:

<link rel="stylesheet" type="text/css" href="http://yourdomain.com/css/[!UltimateParent!].css" />

works great

greets Dimmy

Got it installed, wahey. For some reason though, it doesn’t display right:



I took all the default styles out of the sites main css file, just in case there was a conflict and it still displays as above. I’m sure it something simple, I’ll have a play around with it.

Thanks
Lee