I'm looking for a good tutorial on making Fly-out menus...

I’m looking for a good tutorial on making Fly-out menus using Wayfinder.

The accordian menus are cool, but this one has to be css fly-out menus. I am pretty sure I will have to incorporate JQuery and I don’t know much javascript at all, so I was wondering if anyone has already tackled this.

MODx is a great system, and I am really excited about the doors it opens up. And there is a lot of good info about it out there, but finding it can be pretty daunting. Do you have any recommendations for tutorials & reading material?

Thanks!
-Doug

So far I have found this one, which although I am still trying to get to work, seems like it is a good start...

http://www.muddydogpaws.com/development/wayfinder/examples/example-4.html

But it isn’t a real tutorial, though it can easily get you started if you already know what you are doing.

For those who don’t know what they are doing, I would recommend they check-out Kongondo’s PDF: "The Almost Complete Guide to Creating Menus in MODx Using Wayfinder", which I found somewhere here on this site. It is a bit long at 140 pages, so I suggest printing them all out and putting them in a loose-leaf notebook like I did, but it is very thorough so that even beginner webmasters, artists and designers can easily follow along.

I still haven’t finished it, but Kongondo’s expertise has been invaluable to my understanding of creating and customizing my own menus and moving all of my larger websites onto the MODx content management framework.

However, I am still looking for more info and all suggestions are appreciated.

Thanks!

I like cssplay for flyout menus, which I believe is examined in the Wayfinder Guide pdf.

Attaching it here

http://www.cssplay.co.uk/menus/

Hi redtoad...

Yeah, that is a great PDF. I printed it out and made it a ways through the book, but it’s 140 page tutorial to making all kinds of menus. I will read it all, and I have ordered the MODx book from Amazon.com, too. But it takes forever to get through it and I am in a hurry to get done.

Of course, now I am trying to combine CSS Sprites and Fly-out Menus.

So far the CSSPlay stuff seems to be working the best, but now I need to get the images loading.

I just can’t figure out what I am doing wrong, there.

http://www.elstonmfg.com/index.php?id=70

Right now I’m not loading the images there. I am at the real MODx site (http://www.elstonmfg.com/index.php), but when I use the same code in Wayfinder things get screwy and my hover/active images don’t load.

I will have to replace the images I am using now and just use text over the rollover and active background <li>s, but just seeing them work would be good, so that I would know that this could be done.

Anyways, it’s not the right reason, but the client is really upset about how long this is taking, as this is my first MODx website I’ve done.

Thanks for the help! -Doug

I think I am finally happy with what I have.

http://www.elstonmfg.com/index.php?id=73

The client still has to decide which rollover style they like the best and I have given them a few options.

Some of the mistakes that I made along the way include not placing a px after my offset measurement...

And covering up my CSS Sprite Image Background (the default button style) that I used for the main <UL> with a color background...



The working code at http://www.muddydogpaws.com/development/wayfinder/examples/example-4.html was honestly my best help, but I did learn a significant amount of stuff (including a much better and clearer understanding of how Wayfinder works and how to code for it) by reading some of Kongondo’s PDF: "The Almost Complete Guide to Creating Menus in MODx Using Wayfinder".

I would like to thank Kyle Jaebker, Wayfinder’s developer for such a great menu system, Stu Nicholls at http://www.cssplay.co.uk/menus/ for providing the example code which I tweaked and used, and A List Apart’s Dave Shea for the CSS Sprites example (http://www.alistapart.com/articles/sprites/) that I have heavily modified for my own purposes, adding the resources of both examples in order to make my own hybrid fly-out.

I also need to thank Kongondo for his superior Wayfinder tutorial. I honestly still am not through reading all of Kongondo’s PDF, but I know I will and already prize it as a great resource for developing menus in MODx. I am sure that it will still be as valuable even after the MODx book I ordered from Amazon gets here.

MODx has proven itself a great platform for unlimited creativity. The menu arrived at (residing at the indicated link above) will eventually be not only the base for the website at that domain, but will be used as a tool for me to further build and expound on as I continue to employ MODx in future websites. It has proven that it is only limited by my own stupidity, as I try and fight my very own mistakes in coding.

Thanks Everyone, including Ryan Thrash and all the MODx developers!

As a mere designer, I am in awe. -Doug

sorry I did not reply when you posted your difficulty Doug and I’m glad you got it resolved. If I ever do not respond to a reply, please feel free to email me directly. I’m glad the wayfinder guide was helpful to you, it has saved me numerous times.

but congrats on your progress! well done!!

Thanks, RedToad!

The site went live last weekend and I did an SEO update earlier this week. I’m still experimenting with one more template, but everything seems good so far.

I also grabbed the MODx Web Development book by Antano Soler John and published by PACKT Publishing, from Amazon.com (of course it didn’t show up until the end of the job, but this is far from my last experience with MODx).

Now I’ll be using MODx on my next project, too. So I’ll very obviously be back to ask more questions.

-Doug