• Login
  • Register

DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.

Mega Menu

You are not authorized to post a reply.
Sort:


New Member


Posts:8
New Member

    Has anyone got a good working example of a Mega Menu to use in a theme. I have started to use a token based version from https://github.com/MarkXA/ddrmenutemplates, but think I need to switch to Razor as I want to have some root pages as standard vertical and some as 4 column mega.

    I managed to make a fudge using jquery, classes and css to float some mega columns to a vertical but this is not ideal. If anyone has a good razor solution as a starting point I would appreciate it.

    As yet, I don't seem to have found any recent DDR Mega Menu example that also works on a mobile device.

     



    Veteran Member


    Posts:1147
    Veteran Member

      Look in the skinning section of the DNN Docs site.
      Joe Craig
      DNN MVP
      Patapsco Research Group


      Basic Member


      Posts:103
      Basic Member

        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!
        David Poindexter
        Corporate Website  |  Facebook Page  |  Twitter Page

        nvisionative
        Creator of:


        New Member


        Posts:2
        New Member

          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


          New Member


          Posts:8
          New Member

            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.

            DDR Mega Menu Screenshot

             

             

             

             

             

             

             

             

            Showing Root and Level 1 in Vertical Mode

            You are not authorized to post a reply.

            These Forums are dedicated to discussion of DNN Platform.

            For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

            1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
            2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
            3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
            4. No Flaming or Trolling.
            5. No Profanity, Racism, or Prejudice.
            6. Site Moderators have the final word on approving / removing a thread or post or comment.
            7. English language posting only, please.

            Would you like to help us?

            Awesome! Simply post in the forums using the link below and we'll get you started.

            Get Involved