Wayfinder mega menu

Hi,
I am trying to implement new css3 Mega menu into wayfinder:
http://codecanyon.net/item/css3-mega-drop-down-menu/126387

Problem is that every column in menu (first list) have different layout (theme).
So what I need is basic wayfinder code to show first <ul><li class="menu">...</li></ul> and the for every "subfloder" diferent template (for example from chunk).
So far I am hopeless...

You can use &rowIdPrefix to assign a unique id to each list item in your menu, of the format rowIdPrefix + docId

Like this:


Then you can target each item separately in your css, by #column1, #column2, etc....
Try it out and have a look at the html you end up with.

Quote from: lucas at Jun 10, 2011, 09:21 AM

You can use &rowIdPrefix to assign a unique id to each list item in your menu, of the format rowIdPrefix + docId

Like this:

[[!Wayfinder? &startId=`0` &rowIdPrefix=`column`]]

Then you can target each item separately in your css, by #column1, #column2, etc....
Try it out and have a look at the html you end up with.

Thanks for answer, but if I understand correctly each list can be modified only by CSS, but I need to create some div, span and links which means create new template (page) for each item.

Gotcha. If you’re not a coder you could do this using the Switch snippet.

Download and install that, then create a new chunk called ’rowTpl’:

Basically this checks the docid of each menu item, and outputs a different chunk for each.

Then create chunks for each subnav layout you need, using Wayfinder’s placeholders where you need them.

And your Wayfinder call:


Does that make sense? When all is working, cache both snippets as you won’t need them to run on every page load.

Edit: on second thoughts, I’m not sure if that will work from within Wayfinder Let me know!

Quote from: lucas at Jun 10, 2011, 11:23 AM

Gotcha. If you’re not a coder you could do this using the Switch snippet.

Download and install that, then create a new chunk called ’rowTpl’:

<li>[[!switch? 
       &get=`[[+wf.docid]]`    
       &c1=`1` &do1=`[[$chunk1]]`    
       &c2=`2` &do2=`[[$chunk2]]`    
       &c3=`3` &do3=`[[$chunk3]]`    
       &default=`[[$defaultchunk]]`  
]]</li>

Basically this checks the docid of each menu item, and outputs a different chunk for each.

Then create chunks for each subnav layout you need, using Wayfinder’s placeholders where you need them.

And your Wayfinder call:

[[!Wayfinder? &startId=`0` &rowTpl=`rowTpl`]]

Does that make sense? When all is working, cache both snippets as you won’t need them to run on every page load.

Edit: on second thoughts, I’m not sure if that will work from within Wayfinder Let me know!

Maybe I forgot to mention that I am using Evolution, Switch snippet is made for Revolution

Switch will work on Evo but you won’t be able to install as a package.
I’ve attached the snippet code here; create a new snippet named ’switch’ and copy and paste the attached code.

But I’m still not sure if it will work nested inside Wayfinder

...no ID added to the html. What am I doing wrong?

You need to use Evo snippet syntax:


By the way, I tested the ’switch’ technique I suggested above and it works for me without any issues. I’ve got different chunks for each column and the Wayfinder placeholders all work too.

strange... it gives id for <li> only for last children....
but I need it only for the highest parent...

You can specify a custom innerRowTpl chunk with the ’id’ placeholder removed:


Not sure why the last few rows have no id though...