Hi,
Not tested yet but here’s another approach...
1. Create a 3 level menu
first level - Home, Logo Design, Stuff for Inspiratin, About us, Contact
Second level - Logo, Branding, Clearance, Design Tutorials etc - respectively
3rd level - Corporate, Small Business, Business cards, etc - respectively
2. Get rid of the extra markup in the menu - the divs and h2 and h3 unless it is necessary to have them. If that’s the case, we can edit the WF tpl chunks. Stick to ul and li.
3. Alter the CSS to style the new menu
3. Create 5 chunks - outerTpl, rowTpl, innerTpl, innerRowTpl and categoryFoldersTpl
Here are the chunks
outerTpl
<ul id="menu"[+wf.classes+]>
[+wf.wrapper+]
</ul>
<!-- Here the class is applied directly but you can also use wf.classes if you wish. The top level menu will use this tpl-->
<li class="mega">
<a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
[+wf.introtext+] <!-- this will pick up text from your document's summary,
e.g. in your sample page, the lorem ipsum in "Contact" & "About us" pages
Enclose within p tags-->
[+wf.wrapper+] <!-- sub-menus will appear here-->
</li>
<!-- You will need a different wrapper from the outerTpl for you sub-menus -->
categoryFoldersTpl <!-- This will be used for the 2nd level menu items which will not be clickable. They’ll also be h2 tags-->
<li class="categories"><h2>[+wf.linktext+]</h2>
[+wf.introtext+][+wf.wrapper+]</li>
<!-- Here the introtext will be used for the stuff such as the "40% off all design books this weekend only. Don't miss out".
In your sample page example, this would be in the document "Clearance".
So - <p>40% off all design books this weekend only. <a href="[~id~]">Don't miss out</a></p>
Replace id with the document id you are linking to -->
<!-- This will be used by the 3rd level menu items -->
<li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>,[+wf.wrapper+]</li>
[+wf.introtext+]
<!-- here the introtext is for the "More...."
I suppose the more is pointing to a document with a listing of other documents in the category?.
So, it is basically a link. Create that link in the summary field of the last document in the sub-menu, e.g. for Branding category,
this would have to be in the document "Marketing".
So - <li class="more"><a href="[~id~]">More....</a></li>.
To validate the text needs to be enclosed in li tags by virtue of where they are appearing within the code -->
4. "More...." - I think this can be achieved in other ways too depending on your circumstances. It might be difficult trying to remember which document will be containing this text since it has to be in the last document for every 3rd level menu item. If your menu will be growing, then the "More.." has to be moved to the "new" last document. There could be ways to get round this though. If you menu will not be growing then that’s not a problem.
5. The "More stuff for Branding"/"More stuff for Designers" are the trickiest bit. I don’t have a straight answer though I think you can pull them off as either part of the introtext in the categoryFoldersTpl - if you choose this solution then you will need to know which category document to place them in.....or, you can create these as child documents of their respective categories, making sure they are last in the menu and style them differently using the "last" class that will automatically be applied to them. I think this second method is probably not the way to go. If I get any more ideas will let you know.
That’s it. Sorry for the long post. I hope it works. The rest is basically css styling to make it look the way you want.
cheers/k
1st EDIT: Code edited for syntax errors (e.g. modx link tags and wf.wrapper)
2nd EDIT: SEE BELOW FOR ALTERNATIVE METHOD - This one here might also work but am too lazy to edit the CSS!
....in MODx...there’s almost always another way of achieving stuff....