Released: DotNetNuke Templated Mega-Menu Provider

A screenshot of the prototype DotNetnuke DNNMenu Mega-Menu Navigation Provider

I am pleased to announce the 1.00.00 release of a new templated mega-menu provider. It is based on, and derives its functionality from, the default DNNMenu.

The provider allows for the marking of one or more pages as being templated; during instantiation these templates are dynamically inserted into the page. The templates are highly flexible and may be deployed at the site, skin, or portal level. This allows for great flexibility in user experience.

Goals

  • Allow website administrators to select from one or more pre-defined menu templates for any page
  • Allow templates to be deployed at the installation, portal, and skin level
  • Allow specification of both rendered HTML and CSS file attachment on a per-page basis
  • Allow templates to be fully search engine friendly and utilize modern XHTML and CSS design
  • Rely on default DNNMenu implementation for all other behavior
  • Require no core changes and utilize only existing DotNetNuke extension points

Background

The DotNetNuke content management system is a mature, robust, and widely-adopted web application framework. While the framework allows for the use of myriad menu systems (through the application of the provider pattern), to date there is no way to effectuate per-page templated (“mega”) menus.

This project attempts to bridge that gap by extending the DotNetNuke-default DNNMenu system to render custom templates in place of any node in the menu hierarchy. These templates are easy to create and extend, and allow for a wide variety of final user experiences. Several such templates are included out-of-the-box, demonstrating the flexibility of this provider extension. For maximum flexibility, templates may be deployed by a host across an entire installation, provided as a part of a skinning package, or deployed on a per-portal basis.

What this project is…

This project is a derivative of the popular and DotNetNuke-included DNNMenu system included with the DotNetNuke Webcontrols project. All the functionality present in that menu system may be utilized by using this provider.

What this project is not…

This project is NOT a new menu system for DotNetNuke. It merely extends a small part of the functionality that already exists in the DNNMenu system. Although it is very likely that this method may be used to extend other menu providers (I have already verified this with the Telerik’s RadMenu), it does not yet do so.

If any developer wishes to extend the method used herein to any other popular DotNetNuke navigation provider and would be interested in donating the code to the project, it would be greatly appreciated.

More Information

For more information about this provider, including additional screenshots, please visit the project homepage (http://dnntemplatedmenu.codeplex.com) located on CodePlex.  The software itself is licensed under a liberal New BSD license for wide community utilization.

Be Sociable, Share!

22 Comments

  1. Dax Davis

    June 1, 2009 @ 11:00 am

    1

    Very cool extension. Thanks a lot!

  2. cpg

    June 1, 2009 @ 1:32 pm

    2

    Under /Providers/TemplatedDNNMenuNavigationProvider/, your provider zip file contains Descriptions.ascx, but when you apply the templated skin, it gives an error saying it can’t find Description.ascx — with no “s”. I just removed the s from the filename and it worked. Please fix in your distribution files.

    I haven’t had much chance to play with this but I have hopes. It looks great. thank you for you efforts.

  3. Brandon Haynes

    June 1, 2009 @ 1:47 pm

    3

    I have updated the documentation to indicate that the plural “Descriptions” should be used in the meta content tag (where it was previously incorrectly indicating that the singular should be used); I believe that this will remedy this issue.

    I do not believe that the distribution contains any hard-coded template files, so the release will not need to be meaningfully updated otherwise.

    Thanks for that report CPG. It is greatly appreciated.

    Brandon

  4. Ely

    June 4, 2009 @ 4:00 am

    4

    Hi Brandon,

    Just installed your release. What I noticed is that the menu is not stable when you use the tab key. I can tab to the menu and when I use my arrow down key the menu pops open. When I tab to the submenu’s the menu dissapears.

    Tabable menu’s are very important because blind people who use screenreades use that function to read the menu.

    Can you take a look at this ? I hope u understand, of you have any questions please feel free to ask.

    Regards,
    Ely

  5. Noorin

    June 10, 2009 @ 11:31 am

    5

    Hi Brandaon,

    This is a great menu! But is it only for DNN 5.x? Or does it support DNN 4.x also? I tried installing it in DNN 4.9.4 but I was not successful. Could you please give me details on this? It is quite urgent because if this is not supported in DNN 4.x, I’ll have to look for some other third party control.

    Thanks!

    -Noorin

  6. Brandon Haynes

    June 10, 2009 @ 12:38 pm

    6

    @Ely: While I understand and agree with your reasoning here, this package is designed to be a simple extension to the existing DNNMenu provider. Unfortunately, it appears that that this base menuing system does not deal well with a hierarchy of HTML as element children (and indeed this was likely an unforeseen use-case on their part). And while it would be generally out of scope for me to adjust the base behavior in any way, I’ll have to think about how this shortcoming might be addressed.

    @Noorin: This package is designed against DotNetNuke version 5.0.1 and higher. It will not work out-of-the-box for pre-5.0.1 installations. However, I believe that the overwhelming majority of the differences will be simple changes between deprecated calls and there is little post-version-5 functionality that is being taken advantage of here.

    If you urgently require a 4.x install, I suggest downloading the code and compiling a custom version against the 4.x line. I think it will be fairly straightforward (but I will be unable to offer specific guidance in this particular process).

    Otherwise, I suggest considering an upgrade to 5.1 in the near future. It is looking to be a highly stable distribution.

    B

  7. Francisco Pérez Andrés

    June 15, 2009 @ 6:21 am

    7

    Does anyone know any menu, for DNN 4, quite similar to this. It’s a great extension but I’m afraid we still have a few months before we can set DNN 5 for production sites.

    TIA,
    Francisco

  8. Greg

    June 22, 2009 @ 5:25 pm

    8

    Brandon-

    I want to have mega-menu as a module so I can use Live Content to pop-up my site menu with one button. Any ideas of how I could go about doing this?

    Thanks
    Greg (@leazon)

  9. Brandon Haynes

    June 23, 2009 @ 9:35 am

    9

    Hi Greg,

    The DotNetNuke Nav control, which is the control (typically) utilized by skins to display the menu, automatically initializes the navigation provider with the page hierarchy. This means that you’ll be out of luck using it to display non-page-hierarchy content (without some sort of ugly kludge, anyway).

    Unfortunately, DotNetNuke does not really include any control that will accomplish what you’re looking to do. Your recourse here is to reproduce the behavior in the Nav control and provide your own menu element hierarchy, or roll-your-own user control (that presumably would do the same thing).

    Assuming you do so, I do not see any reason that you could not utilize templated menuing to accomplish a mega-menu-style display; there might, however, be a bit of custom skinning CSS that would be required.

    Hope this helps!

    B

  10. Hardik

    July 15, 2009 @ 7:09 am

    10

    Hi Brandon,

    Can I control the number of menu items per line in mega-menu. E.g. I need to display only 10 menu items in first line and the remaining menu items in second line ?

    Thanks
    Hardik

  11. Brandon Haynes

    July 15, 2009 @ 9:47 am

    11

    Hi Hardik,

    Take a look in the Providers/TemplatedDNNMenuNavigationProvider directory for the sample templates that come with the provider; there you may copy one (and then instantiate it by name), or less optimally modify the template itself.

    Since these templates are simple ASCX/HTML markup (e.g. Default.ascx) and CSS styling (e.g. Default.css), virtually any visual presentation format is possible. In your case, you might want to use two unordered lists; one with the first ten elements floated left, and the rest floated right.

    Hope this helps!

    B

  12. GR

    August 24, 2009 @ 6:27 pm

    12

    Excellent menu. Thank you very much.

    If I want to start from level=”child”, this doesn’t work. Is there a way where I can make it work from any level? I want to use Level=”Child” StartTabid=”39″ in the dnn:nav tag.

    Please let me know your suggestions.

    Thanks once again,
    GR

  13. Brandon Haynes

    August 28, 2009 @ 9:54 am

    13

    As I mention in the discussion, this provider relies on the underlying DNN:Nav implementation for almost all of its (non-templating) functionality. As such, I would expect that most anything that works without the adapter would also work WITH the adapter (barring a specific templating error).

    That said, if I were in your shoes, I would ensure that the level and startTabId attributes are working properly with the underlying provider (by restoring your navigation provider settings to their original configuration); once you have tweaked these settings to your taste, re-adding the templating provider should produce a menu that works identically (save for the added templating features).

    Hope this helps!

    B

  14. GR

    September 22, 2009 @ 8:50 am

    14

    Thank you very much… This is an amazing menu…

  15. Phil Speth

    April 14, 2010 @ 5:54 pm

    15

    I have been testing with a local site that is set to display the nav as an unordered list. For some reason that I haven’t tracked down it is adding an tag and a around the menu. Like the following:

    My Modules


    Publisher

    I was wondering if you could help me track down where the tags were coming from?

  16. Brandon Haynes

    April 25, 2010 @ 8:48 am

    16

    Hi Phil,

    The underlying DNNMenu hard-inserts an anchor tag around the content of each menu item, and expects simple textual content. In the templated menu approach, we are intercepting the call that realizes that content and replacing it with (typically complex) markup.

    Unfortunately, to the best of my recollection, there is no way to easily remove this now-extraneous anchor without modification of the underlying DNNMenu component, which is prohibited as a design precondition of the extension. (Recall that this was an architectural experiment as much as it is a production-quality menu choice.)

    One approach that you might experiment with is a constructive twist classic markup-injection. Try closing the open tag at the beginning of your template and opening a new one at the end (e.g. ). I’m not sure if this will work, or if this will result in anything that is more XML compliant than where we’re at, but it’s worth a shot.

    Hope this helps!

    B

  17. Cassidi

    June 3, 2010 @ 3:29 pm

    17

    Brandon,

    Thanks for this great tool. The instructions were perfect for implementing the modified skin you had for download. Is there any where with instructions on how to modify a skin to work with the menu? I want to make sure I don’t miss any steps. Also, I do not build skins straight to ascx, so any advice on how to use xml with tokens would be great. Thank cassidi

  18. Paul Wade

    July 22, 2010 @ 6:30 pm

    18

    I’ve run into some problems.

    I have installed the template ok.

    I have the following markup in my Entropy index.aspx….

    <dnn:NAV runat="server" id="dnnNAV" ProviderName="TemplatedDNNMenuNavigationProvider" IndicateChildren="false" ControlOrientation="Horizontal" CSSControl="mainMenu

    I have the following in my page header…..

    1) The child menu item is not being displayed properly. Part of it is missing. It looks like the left margin is not being applied.

    2) The expanded menu is turning completly red when I hover over it with the mouse.

    Any help appreciated.

    Regards,

    Paul.

  19. Man.Os

    August 10, 2010 @ 3:06 am

    19

    Hello,
    great menu – DNN really needed this!
    I only have one question. In the normal NAV menu you can use the CustomAttribute to set the RenderMode to UnorderedList. This way you avoid the use of any tables in menu elements. I can’t get this to work on TemplatedMenu. Is there a way to do it?
    thanks loads!
    Manos

  20. Brandon Haynes

    August 18, 2010 @ 11:03 am

    20

    Hi Man.Os,

    I have not yet tested the module with the unordered rendering option. If you could open a work item on Codeplex regarding the issue, I would be happy to investigate further. It certainly would be highly desirable for the extension to support this option.

    Brandon

  21. Brandon Haynes

    August 18, 2010 @ 11:10 am

    21

    Hi Cassidi,

    Modifying an existing skin that already uses the DotNetNuke NAV menu should be straightforward; simply change the base menu type to the templated menu. For skins that do not utilize this menu, the Nav.ascx control must be imported and the skin declaration will need to be updated. Take a look at the core-included Extropy skin to see how this is done. Note that changing the menu type will likely affect the presentation of the menu itself, and you will probably have some additional styling work to do.

    I do not believe that there is anything in the metaconfiguration that would preclude you from utilizing an html skin file, but I have not directly attempted to do so.

    Hope this helps!

    Brandon

  22. Brandon Haynes

    August 18, 2010 @ 11:13 am

    22

    Hi Paul,

    I do not see anything that strikes me as being particularly incorrect about your configuration. If I were in your shoes, I would load up a debugging aid such as Firebug to track down exactly which styles are causing difficulties.

    Best of luck!

    Brandon

Log in