DNN Platform Templated (Mega-)Menu Navigation Provider

More details about this project may be found on my blog.

Description

A derivative of the built-in DotNetNuke DNNMenu navigation provider, allowing for templated custom menu panels.

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.

Installation instructions

This provider is installed just as any other module or provider through the Host->Modules menu item. Note that the provider requires DotNetNuke version 5.0.1 or greater; ensure that your installation meets this minimum requirement before proceeding.

To install:

  1. Log in as a host user
  2. Install the TemplatedDNNMenuNavigationProvider install package,
  3. Optionally install the Templated MinimalExtropy skin package, or any other skin configured to utilized the templated provider,
  4. Change a page (or site) skin to use a skin that utilizes the templated provider.

Configuration and Usage

  • Navigate to the settings for the page that is the root of the menu you wish to template (e.g. the Admin page).
  • In the Advanced->Page Header Tags textbox, enter the string:
                <meta name="menuTemplate" content="" />
  • Return to the page you specified to use the template skin, and note that the tagged menu is now using the default template (which is not that attractive until the pages have been structured into a better hierarchy).
  • The default template displays children in a large font; grandchildren are in a normal font. You’ll have to use the Admin->Tabs page to rearrange some tabs to see this behavior. For example, in one of the screenshots I moved the Tabs page to be under the “Web Administration” tab.

The default template is located at /Providers/NavigationProviders/DNNTemplatedMenuNavigationProvider/Default.ascx. You can specify an alternate template by adding its name to the content portion of the meta tag; by way of example, a tag that reads as belowwill use the Descriptions.ascx template, which displays a page’s description (if any) underneath its link.
                <meta name="menuTemplate" content="Descriptions" />
Skin designers can deploy their own templates; these may be accessed via a tag of the form:
                <meta name="menuTemplate" content="skin:[TemplateName]" />
Similarly, a host may provide a portal-specific template which may be accessed via:
                <meta name="menuTemplate" content="portal:[TemplateName]" />
Finally, the templates generally render highly similar markup (a nested hierarchy of ULs) and are differentiated primarily by CSS. A template CSS can be specified through another meta tag, formatted as:
                <meta name="menuCss" content="CssFile" />
Like the template, a “portal:” or “skin:” prefix may be used; if none are specified the css is drawn from the provider directory. The second screenshot below uses the “wide” css template.

So, to reproduce the screenshots, the first uses the following metadata:
                <meta name="menuTemplate" content="" />
And the second uses:
                <meta name="menuTemplate" content="Heading" />
                <meta name="menuCss" content="Wide" />

All other modifications required to generate a menu similar to those displayed herein are normal DotNetNuke configuration functions, such as page image selection, descriptions, hierarchy adjustments, and so on.

Templates Included in this Distribution

Default Template

<meta name="menuTemplate" content="" />
The default template is designed to display a page's children as headings and grandchildren as subheadings. Subheadings are organized into two columns. If present, the page's image is displayed alongside the page name.

Default Template Screenshot

Descriptions Template

<meta name="menuTemplate" content="Descriptions" />
This template renders identically to the default template, and additionally includes the page's description (if any) below the main menu headings.

Descriptions Template Screenshot

Wide

<meta name="menuTemplate" content="" />
<meta name="menuCss" content="Wide" />
This template displays a node's children as column headings, and grandchildren as subheadings organized underneath.

Default Template Screenshot

Heading

<meta name="menuTemplate" content="Heading" />
<meta name="menuCss" content="Wide" />)
This template includes a configurable catchline at the top of the panel, and may be styled vertically or "wide."

Heading Template Screenshot

I Want That on My Skin!

It's easy. Instantiate an Admin/Skins/Nav.ascx control as:

<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>

  ...

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

  ...

You can include any or all of the properties available on the DotNetNuke Nav control. The templated menu provider does not directly use any of these; they are passed as-is to the underlying DNNMenu provider. That's it!

Feedback, Reviews, and Ratings Appreciated!

Feedback about your experiences is needed, and greatly appreciated!

Last edited Apr 23 at 8:14 PM by BrandonHaynes, version 22