Standard DNN menu, upgraded

Just change a couple of characters in a skin that uses DNNMenu or SolPart to get:

  • True hyperlinks, including right-click and middle-click support
  • SEO friendliness
  • Better user experience
  • Improved browser support
  • Improved accessibility

This is the menu from the standard MinimalExtropy skin that comes with DNN, upgraded to the DNNGarden menu:

How it looks

 

How to set it up

DNNMenu

  1. Install the core menu.
  2. Edit your skin's ASCX files and replace
    <dnn:nav providername="DNNMenuNavigationProvider" ...>
    with
    <dnn:nav providername="DDRMenuNavigationProvider" ...>

SolPart menu

  1. Install the core menu.
  2. Edit your skin's ASCX files and replace
    <%@ Register TagPrefix="dnn" TagName="..." src="~/Admin/Skins/SolPartMenu.ascx" %>
    with
    <%@ Register TagPrefix="dnn" TagName="..." src="~/DesktopModules/DDRMenu/SolPartMenu.ascx" %>

SolPart menus using <dnn:nav> syntax

  1. Install the core menu.
  2. In your skin's ASCX files, if it's not already there, add
    <%@ Register TagPrefix="dnn" Namespace="DotNetNuke.UI.Skins" Assembly="DotNetNuke" %>
    to the list of Register tags at the start of the skin (this enables custom attributes for the dnn:nav control).
  3. Replace
    <dnn:nav providername="SolpartMenuNavigationProvider" ...></dnn:nav>
    with
    <dnn:nav providername="DDRMenuNavigationProvider" ...>
    <CustomAttributes><dnn:CustomAttribute Name="MenuStyle" Value="SolPart"/></CustomAttributes>
    </dnn:nav>

Options

As well as the usual DNNMenu options, you can also specify which of the jQuery UI effects to use to show submenus. There are three parameters, effect, effectOptions and effectSpeed, which match the first three parameters of the jQuery UI show command except that effect can also be none or fade. For example,

...
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.UI.Skins" Assembly="DotNetNuke" %>
...
<dnn:nav providername="DDRMenuNavigationProvider" ...>
<CustomAttributes>
<dnn:CustomAttribute Name="effect" Value="puff"/>
<dnn:CustomAttribute Name="effectOptions" Value="{percent:200}"/>
<dnn:CustomAttribute Name="effectSpeed" Value="slow"/>
</CustomAttributes>
</dnn:nav>

looks like this:

Another example

 

Sign up for updates