Downloadable Wayfinder examples?

I'm going to do my homework and go through all docs and tutorials I can find on Wayfinder, but there's nothing like a working set of code to pick apart and learn the nuances. With all of the people using Wayfinder here, I would think that it would be possible to pack up a downloadable package which noobs can use for learning. Of course script kiddies will just try to implement whatever they download and then ask questions about why it doesn't work, but for the rest of us it's hard to put all of the pieces together from scratch.
- There are snippet properties which can be set
- Chunks corresponding to those properties
- CSS corresponding to each component

Can someone point to some downloadable packages that have this? How about a backup of existing site with menus that no one cares about anymore? Or (fat chance) would anyone be willing to give me read-only access to their site so that I can see how all of these things link up?

Specifically I'm looking for nice dropdown menus. I've seen the live examples but the information required to recreate those examples is sparse. ... They are "examples" and not "tutorials".

Based on the difficulty in trying to get Wayfinder to do the marvelous things it does, I'm very tempted to go back to a tool that I've been using for over a decade, DHTML Menu Builder. I'm not saying that to be snotty, just sayin... But really, I do want to understand as much as I can about Wayfinder.

Thanks!

Do you have the e-book? http://sottwell.com/tech/wayfinder.html

The thing is with Wayfinder, you choose your menu, then adjust the Wayfinder tpls to generate that structure. It adapts to your wishes, you don't have to adapt to what it lets you do.

Hi captainstarbuck,

it's really not hard at all, i normally start with a very simple Wayfinder call in my site template which only uses a small amount of parameters like "startId" and "level".

Then i add parameters for the needed templates, but most of the time i use no template at all and just style the menu with CSS. You only would need templates if you want to change the standard markup of your (nested) list(s). For example you could just as well construct tables or whatever. But mostly lists are fine and semantically the best option.

Then in the CSS of the site template select the menu as follows:

Insert your personal styles where the dots (...) are of course.


General tipp: If you are new to Wayfinder it is probably best to change a value and then test, then change, then test, and so on. It can be frustrating if something breaks and you have to undo one by one to find the error. But i can assure you i never came across a situation where i couldn't build with wayfinder what i wanted to.

If you have any specific questions, feel free to post your code and/or css. I am happy to help...


Going to bed now though

Greetings
Harde

Hi Susan,

i also didn't have the ebook, is it up-to-date? I see it is from 2009? Anyways, i like the cheatsheet much better, thank you for sharing!

greetings,
Harde

The official documentation
Mary's excellent Coding Pad
Belar Design's tutorial
And a good one for a responsive menu

Google is your friend. [ed. note: sottwell last edited this post 13 years, 9 months ago.]

ottogal::ymodx - Interactive Wayfinder Demo

What everyone else said ^^^^

The Wayfinder E-book is written for Evolution, however not much other than the tag syntax is different for Revolution. It's worth a gander at. I also recommend picking up Bob Ray's Official Guide to MODX. It's worth every penny.

Ottogal's demo is helpful as well. Wayfinder does exactly what you tell it to do. Susan's cheatsheet is invaluable and the documentation at the rtfm is fairly comprehensive if a little obscure at first.

But... if you're looking for something that is packaged up and can show you how to effectively style your Wayfinder chunks with css, my recommendation would be to install Revo into a test/dev site either locally or on a subfolder and then on that clean install, download the Flexibility package from package management. Do not install Flexibility over any other site, it is a full site with resources/pages and will not play well overwriting an existing site, even another Flexiblity site. Flexibility is a full working site based on the Foundation Responsive Framework, with numerous examples and working chunks/tv's/snippets that you can dig into all you want.

I played with MODX for a while and then found the first version of Flexibility from Design from Within which provided many "ahh ha!" moments. It's changed since then (2010??), but for the better and I honestly can't recommend at least taking a look because so much of the build is useable for any project. Take what you can use, leave the rest.

Depending on your needs, Flexiblity's versions are either for Foundation 3 or Foundation 2. If you do not want to deal with issues with the box-sizing and IE7 incompatibility make sure to grab the last Flexibility 2 version from the Extras rather than Flexibility 3 (solutions are available for IE7 and box-sizing compatibility). Check out http://foundation.zurb.com for more information about this. Personally, I actually like the Flexibility 2 dropdown menu, almost better than Foundation 3's nav-bar and top-nav although the options for the later are far better in terms of simple sidebar menus and mobile/touch operations. I have one site running Foundation 3 (Flexibilty 3.0), so far so good. I will likely not go back to Foundation 2 under normal circumstances. Only one client really needs IE7, and that's just because she works at a hospital that apparently paid too much for an XP build for their network and won't be upgrading till 2030. Imagine the horror! Her site looks very plain at her office, but it works.

Build your menu, and post your code here if it doesn't work 100%. I get the feeling it'll work for you though, you're quick with MODX :~}

I can't believe I'm still up. Babysitting an email for a static table layout client who won't pay for MODX, but who will end up paying almost half as much as the quote for just this month's work. Silly client!

Along with BobRay's book I can recommend W. Shawn Wilkerson's book. Another point of view is always welcome, and this is a good one.

http://www.sanitypress.com/books/modx-revolution-building-the-web-your-way.html

Sincere thanks for all commentary so far. There are some links here that I had not seen - and there is very good information there. I've started reading the 148 page book (The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder by Kongondo) that I re-found recently, now kindly re-hosted on Sue's page.

It looks like Flexibility might be exactly what I'm looking for, thanks!

The oft-recommended PDF cheat sheet is the same material found on (Wayfinder author) Kyle Jaebker's MuddyDogPaws page. Please forgive but I think proper attribution is in order to whoever originated that content.

I have a Lot of reading and experimentation to do. (Oh yes, and clients who need attention too.) But looking at the resources provided here, I can clarify my confusion a little better... This should provide some insight into the noob brain for ModX which you folks did have at one point, but which I still have, and want to explain for anyone writing tutorial material.

The unsorted list will contain more unsorted lists for submenus. Part of my confusion has been about separating the top level list with main pages from the subpages. I believe level 2-n subpages require a different template from level 1, as well as different classes for styling. Even if not using classes, there is different styling for nested UL/LI nodes and their related Anchor tags with hover, active, etc.

I don't need an answer on that because it's not a good question. I'll do my reading and work it out. What I'm saying is that all of the examples (I've seen) so far make an intuitive leap like "if you're doing a dropdown menu, you create a new template, add styles, and you're done!" Whoe! There was a whole lot of know-how left out there! This is where my current confusion is, and I will endeavor to find these links which seem missing to me now, and report back here when I find them. I'm not looking for a tutorial on CSS, just the styling required to support the various templates and tags/classes defined. That's why I was looking for solid examples more than general feedback, because solid examples would link specific styles, chunks, and the tags which call them.

I confess that while I'm competent with CSS in general, I'm not a CSS3 stud, so some of the answers might be in front of me. But I still don't see a lot of examples where multiple templates are being used, and in these tutorials when they say "just add your styles" I have a huge problem jumping from raw HTML provided by the chunks to the final result we see on pages.

Sorry for the long-winded explanation. Again, I will go through the resources provided here so far and will report back here on progress. But if anyone can now say "oh, Now I know what you need" and provided another reference, I'd sure appreciate it."

Regards to all.

This was my introduction to nested lists and menus.
http://www.alistapart.com/articles/taminglists/

The following article came next.
http://www.alistapart.com/articles/dropdowns/

And finally, this article led to a redesign of the MODx (Evo) Manager main menu.
http://www.alistapart.com/articles/hybrid/