Look in the skinning section of the DNN Docs site.

Hehe - this is a pretty loaded question. Each mega menu implementation we conduct is unique to the design and desired user experience. That said, Razor is definitely the way to go! Let us know if you'd like some outside help on this. We've done many of these over the years!

Hey Steve,

What David said, Razor template is the way to go if you're wanting a relatively simple mega menu that only displays content that is available via the DDRMenu (page names, links, page descriptions, etc). If you're wanting a more rich, interactive mega menu, I would suggest using 2sxc. I don't have a code sample for you handy, but I thought I would share the way that I approach mega menus.

1. I start with the content and the design. During this phase, I don't really think about how DNN works at all because I use 2sxc so I know I can add any custom content to my mega menus. For example, sometimes my clients want different tiles or pathways or special links or unique layouts or even just unique text that isn't necessarily associated to DNN page content.
2. Once I've got the design and content figured out, I build the exactly menu in HTML and CSS and JavaScript. I like to use an unambiguous click menu so that only when the user clicks on the menu does it pop open. I think this is better usability than hover. I also style the links and everything to have focus-visible and make everything to be accessible by keyboard navigation. At this phase, I also make everything responsive for every screen.
3. Once I've perfected the layouts, I do a few things:

a) I make a 2sxc app that handles all of my mega menu content. So each of the "big dropdowns". This app goes on a hidden page on my site accessible by admins only. So this app displays the mega menus but also gives total control to the editors to manage their content.

b) Then I use a DDR menu and C# Razor template to make a top level menu which goes into the skin. I leave a div with a page-id associated to it as a "target div".

c) Then I use JavaScript to move my mega menu panels into the target divs based on their page ID.

d) To make this 2sxc app appear on every page, I use the 2sxc method to inject this module by pageID/module ID into the skin's footer. That way it appears on every page.

I realize this sounds very complicated and it kind of is. But this, to my knowledge, is the best way to create a mega menu in DNN that is both custom designed, maximally editable, and easily maintainable code wise.

The only caveat is that it effectively "de-couples" the sub-menus from DNN page structure. But I find that it's not a huge deal considering all the benefits of doing it this way.

If you're curious what that effectively can look like, check out https://aitc.mb.ca/

I hope that helps! Let me know if you need some help with it.

Aaron Lopez
https://wolfxmachina.com

Thanks Aaron and David.
At the moment my customer is ok with the DDR mega menu that I have created with standard vertical menu for root and first level menus and then switch to typical mega menu for second level menus in 4 column horiontal mode.
I can see it is a bit restrictive and at some point it may become too restrictive if they change their needs...but at the moment it is working for me.

It is based on the Mega2DNN Tokenised DDR Menu.

If it is useful to anyone else, here it is.

Download DDR MegaMenu

Screenshots showing it in horizontal 4 column mode for Level 2 pages and vertical column mode for Root and Level 1 Pages.