Downloadable Wayfinder examples?

Quote from: captainstarbuck at Dec 28, 2012, 01:27 PM

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!

If you like to study CSS menus, this is all the know-how you'll ever need:
http://www.cssplay.co.uk/menus/
;-)

Quote from: danilocuculic at Dec 28, 2012, 03:29 PM

If you like to study CSS menus, this is all the know-how you'll ever need http://www.cssplay.co.uk/menus/ ;-)

Thanks. Yeah, I just saw that page for the first time today from another link. It's an awesome resource that I'll have to get through.

And Sue, thanks to you as well - those were good pages.

The message I'm getting here is that the Wayfinder part isn't tough, it just generates well-structured markup. From there I need to match up the class names and/or tags with CSS, and that is where these references to CSS for lists is very helpful.

The more I'm getting familiar with the moving parts the less their movement confuses me. I'll keep at it. And I hope people post more resources for Wayfinder. I'll aggregate um at some point soon.

Thanks for bearing with me folks!

It's the same with any of the listing snippets and any CSS or Javascript you want to use, whether it's for Wayfinder for menus or MIGx and getImageList for galleries. Examine the structure the application you want to use expects, then adjust the snippet's tpls to generate that structure.

For example, the demo I did at the expo used MIGx and getImageList to control a simple group of blocks on the site home page. The free template I was using had the blocks like this



My tpl for getImageList looks like this


For its menu, the same template used a simple unordered list, with only one change needed for the Wayfinder outerTpl:

My tpl for getImageList looks like this

<article>
    <figure>
        <img src="[[+image]]" alt="[[+title]]">
        <figcaption>
            <h3>[[+title]]</h3>
            <p>[[+description]]</p>
        </figcaption>
    </figure>
</article>

For reference, Susan begins with the MIGX blocks referred to above at 50.30 in the video at http://modxpo.eu/schedule/sessions/building-a-modx-site-in-90-minutes

(but watch the whole thing anyway :~})

One tricky application of this sort of thing is when using something like JQuery UI Tabs. You need two sections, one using Wayfinder, to provide the unordered list that the tabs themselves are made out of, then another Wayfinder or getResources call to provide the div blocks that the tab contents are made out of.

Once you get used to the concept of simply using the snippets as tools to generate the HTML structure with content that you need (said content being supplied by the snippet's placeholders), it becomes a matter of familiarity with the available tools (snippets) and imaginative use of their output formatting tpls.

Status update, and a breadcrumb for anyone who follows... I wanted to get some new CSS for my site, so did a quick search for something like "css menu generate online" and I found http://purecssmenu.com/. The CSS generated from their free web page can be used for free with attribution. There are other similar sites. From that page I quickly generated CSS for a dropdown menu, meeting my modest needs. Their code is somewhat ill-formed but it obviously works, so I tweaked it just a little and put it on my site.

Now for Wayfinder, I decided not to leave anything to chance (I like to have control over all of the templates and styles rather than using defaults). I created the following snippet call:

And then I created a simple skeleton for all of the chunks. Now with my home page template invoking the menu I just kept fine-tuning the chunks until I got what I wanted. As I did this I got a better understanding of exactly how Wayfinder works (very important), because I was able to see the changes immediately as I tuned each chunk.

Note that I named my chunks "menu1_" with the idea that in the future if I wanted to have a slightly different menu structure for some part of the site I could copy those chunks to menu2_ and create a new chunk to call Wayfinder. Giving the chunks a generic name also makes it easy to share. Which leads me to...

With reference to the subject of this thread, I would be happy to post my collection of generic chunks and my CSS for someone else to download and use. Imagine if a bunch of people did this, and we had a little collection of zip files with chunks and CSS files in one place on the wiki. My goal with this would be to eliminate some of the pain of getting started with Wayfinder and menu generation by providing a set of working templates which can then be used as a base for any site admin to customize. Now with a menu in place they can continue development, and we can all answer follow-up questions about how it works. The initial discouraging stumbling block of "I won't have a menu until I learn how all of this stuff works" is eliminated. And I think eliminating stumbling blocks like this is important to get people productive with this environment quickly.

Phew!

Has anyone been able to get the Foundation 3 NavBar to work with Wayfinder—and be willing to share there secret?
I have followed the structure used in Flexibility and the drop menu works on desktops, but not on iPhone or iPad. In reviewing all code I also found in the html, a call to the div id "main_nav" —that wraps the navigation menu, yet there is no related CSS code supporting that id. I downloaded the update to flexibility and see that the mobile version of the nav has been replaced with a simple select menu—not really the desired look for the site I am working on.