Stripped down jQuery accordion Wayfinder menu?

I have built quite a few Evo sites with Wayfinder. I have also used some jQuery in these menus.

I have been away from dedicated MODx work and now am struggling with getting this to work with a basic Revo test site. I have still to really "connect" with Revo. Its been a battle for some reason.

Does anyone have a basic guide (with examples) to building a horizontal Wayfinder menu for a Revo site that has 2 or 3 level drop down structure with jQuery? I can build all the CSS myself. I am looking for the templates, and the scripts needed to make this work. Everything I try gets frustrating. I just want to get a sample menu work so I can explore managing content...

MUch thanks in advance...

As far as I know, Wayfinder works much the same in Revo as it does in Evo. Templates are no different, so your JQuery should work the same as well.

I think I am really rusty with this stuff.

For now I am leaving jQuery out of this. I have a drop down menu that works with CSS but the 2nd row drop down links don't work when you hover or try to click them...

imo jQuery is not needed for drop down menus - but could be useful to make them a bit less fussy to use (example you stray with the mouse off something two levels down and the menu collapses and you have to start all over, then you miss again, third time you are wondering if you really wanted to visit the page...)

So getting a css drop down menu to work: - Wayfinder will easily create the nested lists with classes and/or ids and then it's all css.
Since you have not posted anything about your wayfinder call, the code wayfinder creates or your css I have no clue why your third level links are not working - but it would seem likely that the code being produced by your call is not creating the links it needs to. [ed. note: whistlemaker last edited this post 15 years ago.]

Thanks! I have been away from all things MODx for a while now. I am definitely quite rusty.

I am a comfortable (mainly) Evo user. In the past I found myself not really warming up to Revo. So, this week I decided to build an entire test project from the ground up: creating a new custom design in Photoshop for a fictional winemaker. I have successfully created a template and poured it all into a fresh Revolution install. So far so good. The nomenclature and placeholders are a little different is all.

Usually I am not a huge fan of drop down menus, but I thought I would give one a try here. I have ignored jQuery so far and am focussing on building the correct Wayfinder templates and CSS to make it all happen. This pretty much took most of yesterday. I now have a innerTpl, outerTpl, parentRowTpl, and a rowTpl that works. The CSS I built from scratch just by observing the markup generated by the system. The main head scratcher was getting the dropdown level to stay hidden and then reveal itself on mouse roll overs. I also wanted to make sure the parent container link did not actually go to a page resource when clicked: I just wanted the child pages to take viewers somewhere. Figuring out the parentRowTpl did the trick here though (plus some extras CSS for the parent container tab.)

So, after some trial and error hours invested I am pretty happy with the result. I might try adding some jQuery eye-candy to the Wayfinder system when I find some extra time.

Next up: getting the Revo getResources, formIt and Gallery snippets to work...

The trick with CSS and any kind of Javascript is to remember that MODx doesn't have anything at all to do with any of that; it's all done by the browser. All MODx does is provide the HTML structure that forms the base for the CSS and Javascript to work on.

What I always do is get the CSS or Javascript working on a flat-file HTML page (or paste the demo page's code directly into the template itself), then use the snippet's tpls to output exactly the same HTML code that works in flat HTML. In some case, this may take more than one snippet. For a certain rotator with accompanying text that I'm fond of I use resources with image TVs, then two Ditto calls to set up the image list block and the caption block.

Occasionally I'll get a Javascript conflict, but two things I've done for some years now has eliminated that problem. One is to use only JQuery libraries and plugins. There hasn't been a single Javascript effect or widget I've wanted to do that JQuery doesn't have at least one or two plugins for. The other is to always manually link the main JQuery library in my template, and turn off QuickManager's loading of it in QM's configuration. So far QM has happily run on every version of JQuery.

As far as avoiding CSS conflicts, make sure your HTML structure has the proper containers for any block of specially styled or positioned content so you can be more specific in your CSS directives. For a menu, for example, you'd want something like

Your question inspired me to revisit drop down menus with fly-outs.
I started with basic (no extra classes/ids or extra divs) nested unordered lists and wrote the css from scratch - sometimes it is nice to go back and do something from scratch with little pressure to get it done by yesterday!
It uses the most basic Wayfinder call with no templates, I can see why though if you wanted no links from parent pages that a template would be required. I stuck it all on a web page - mostly so that I would have as a start the next time I need a drop down menu and don't want to recreate the wheel. I could share, but would like to clean the page up a bit first.