[SOLVED]Are Mega-Menus with NonLinked Headings Possible in Modx With Wayfinder?

wow, i absolutely try this as well...thanks kongondo!

jan

Hold the champagne m8....Let’t see if it works first

cheers/k

Hmm,

Having looked at this again, there might be a problem with the rowTpl, specifically the introtext with respect to the hover for first level menu items. The way it is now the introtext might be revealed on load. I will look at it further and familiarize myself with how the hoverintent.js works. We might be adding the divs after all

cheers/k

I have only just got to the stage where i can even begin to look at it today (nightmare server issue to fix)... let me (us) know if you change anything.

MT

OK,

Here’s an alternative method. Could have posted earlier but spent some time trying to find out why my menus were not being output....it’s so embarrassing! I had wrapper instead of wf.wrapper in my chunks!. Anyway....

Tested, working fine and validates. Only "issue" is that top level menu items without child docs, e.g. "Home" in the example above, get an empty div. When hovered it shows.

Here goes....

1. Create a 3 level menu
first level - Home, Logo Design, Stuff for Inspiration, About us, Contact
Second level - Logo, Branding, Design Tutorials etc - respectively
3rd level - Corporate, Small Business, Business cards, etc - respectively

2. Create 5 chunks for outerTpl, rowTpl, innerTpl, innerRowTpl and categoryFoldersTpl

Here are the chunks

outerTpl


rowTpl


innerTpl


categoryFoldersTpl <!-- This will be used for the 2nd level menu items which will not be clickable. -->


innerRowTpl <!-- This will be used by the 3rd level menu items -->


And the Wayfinder call



4. "More...." - I have used a TV for this. I created a text TV and called it more. Obviously assigned it to the template my documents will be using. Within the "more TV" for the respective documents that are categories, e.g. "Design Tutorials", "Inspiration", etc, I added the code/text for the more link....e.g. <a href="[~id~]">More...</a>. Using and placing the TV in the right spot ensures no matter how many new menu items are dynamically added, the "More.." link will always be last.

5. The extras, i.e. the "More stuff for Branding"/"More stuff for Designers" =>

I decided to use a TV for this...

- Create a TV for extra material, e.g. the "40% off" text. I prefer a text area TV for this. Called mine extras
Remember in WF you call it like so [+extras+]

- Add the TV to the rowTpl as shown above in the rowTpl code. This way, its content will be displayed after the sub-menus

Examples:

Example 1

The text for the extras TV for the "Clearance, 40% etc" ==> I added this to the "extras TV" of the document at the
highest level of the menu for this group, i.e. "Logo Design" in the sample site above (in my tests it is Corporate Branding). Here’s the code/text:


Example 2

The text for the extras TV for the "Get Latest Photoshop at discounted price! etc" ==> Again I added this to the "extras TV" of the
document at the highest level of the menu for this group, i.e. "Stuff for Inspiration".
Here’s the code/text:



Screenshots






EDIT:
1. Added p tags around the wf.wrapper of the categoryFoldersTpl. This will surround the <a> tags that are the innerRowTpl just like in the sample code provided by MT.
2. Removed the wf.introtext from the categoryFoldersTpl; using TVs instead (within the rowTpl)
3. Added the TV "extras" to the rowTpl
4. Removed the wf.introtext from the innerRowTpl; using TVs instead
5. Added the TV "more" to the categoryFoldersTpl
6. Removed wf.title from the tpls.

cheers/k

Hey, this is my 666th post! I won’t post for a while and let this sink in, ha!

Ok... Dunno what to say... That’s a hell of a lot of work you have done there on my little project...

You are indeed the Wayfinder Guru!
Maybe your real power lies in the fact its your 666 post... coincidence? or a warning to the rest of us of you powers?

I REALLY appreciate your effort(s) and I am sure the rest of Modx community will benefit from it too.

I will follow your instruction and let you know how it goes... if anyone can cock it up it will be me!

Thanks.

Told you I could mess it up... 

2nd EDIT: SEE BELOW FOR ALTERNATIVE METHOD - This one here might also work but am too lazy to edit the CSS!

Did you modify my CSS?  (I have not restyled anything in the CSS yet) and I get this >



I have included all the chunks etc as you gave them and my menu/page structure is as below:



It’s obviously something I have/have not done... any ideas or will i need to rework my CSS?

MT,

I used your CSS...the only addition I made was color change to the paragraphs.

Also, if a document is at the second level, it must have child documents - this is so that the categoryFoldersTpl can be applied to them. Otherwise the menu gets messed up and will not validate since normal innerRowTpl will be applied to these "heading" menus. So, "Clearance" , "More" and  "Latest Photoshop" should not be documents if you use the latest method I proposed. They are taken care of by TVs

Finally, I see you have QuickEdit active. Unless you are using jQuery in non-conflict mode, then QuickEdit (it uses MooTools) will more likely than not fight with your jQuery plugins.


Here’s my tree screenshot



Hope this helps

/k

Hmmmm,
Weird, I have re created a menu structure exactly the same as yours, used my original CSS and added all the chunks etc by copy and paste to make sure I have not missed anything (I put the TV’s in as recommended). Still get pretty much as posted previous... Could it be my ’template?’

Should your wayfinder call be called inside a div with a specific ID?

MT

Yes, it should match what’s in your css - i.e. the ids and the classes. I used the code in your sample page. The whole menu is enclosed in a <div id="banner"> wayfinder call </div> .

Like I’ve mentioned, I used your CSS. I had to change line 21 though because you had a style for a div with id "menu" which is not correct since the outerTpl ul has that id. But that didn’t affect my menu output since I noticed that just today. Remember your rowTpl also has an li class="mega".

1. Did you also remember to set the link attributes of the 2nd level menu items (the category headings)  to rel="category" ?

2. Are you testing on a live site? If you are could you put a link here so that we can have a look at the generated source code?

3. Have you confirmed the paths you have in your template pointing to your css and js files are correct?

4. Have you confirmed those css and js files actually exist?

5. Confirm the copy and paste actually pasted the correct code - backticks, double quotes, etc.

cheers/k