I would recommend using a more standard list-based menu that does the same thing. Like this one
http://www.alistapart.com/articles/hybrid/
http://www.alistapart.com/d/hybrid/hybrid-4.html
-
- 483 Posts
@Subran:
I think it's possible but I'm stuck..
You are absolutely correct. All you have to do is create the outer, inner and row Chunks that do what you want. However, @sottwell is correct. Menus are better as lists for a number of reasons:
- They are semantic HTML, and therefore easier for screen-readers
- They are block elements, just like a div.
- CSS allows your to do anything with a list that you could do with a div.
- They are easier to style with CSS. A ul inside an li is easier to find than a div in a div in a div. And in many div menus there are far more divs than just the 3 I listed.
- They generally perform faster.
- They generally result in less code ->smaller requests -> faster loads,
This particular menu actually has the top level separated from the inner levels, and I'm not so sure that Wayfinder can be used to generate such code. It works recursively, so the inner levels are nested within their containing outer levels, no matter what the individual part's tpls produce.
I ran into a similar issue using JQuery UI tabs for displaying search results. The tabs work by having a list of links (that get styled as tabs) and then a set of separate containers that have appropriate IDs to match their links (tabs) to show/hide under their respective tab. My solution there was to use Javascript to generate the links for the tabs after the search results were returned, using the search results categories to determine what links to generate.