Skip to content

DNN 7 Menu Template Modifications to Show Current Or Breadcrumb Trail via a Custom CSS

by on January 2, 2013

I needed to make a simple change in the DNN 7.0 menu template included in the default skin to allow current and/or breadcrumb css based indicators.

You can find which navigation provider is being used in your skin via the registration tag, but in the default you will find the below:

<%@ Register TagPrefix="dnn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>

This shows the DDR Menu is the current navigation provider for DNN 7.0

In the skin, you can see the tag calls the template Simple

<dnn:MENU MenuStyle="Simple" runat="server"></dnn:MENU>

In the default skin “Gravity” you will find the template folder “Simple”.

image

The item you will most likely want to make a quick change to is the SimpleTokens.txt file. The menudef.xml file is a simple manifest referring to this file.

NOTE: For more information on the DDR menu check out the DNN Wiki

DDR Menu http://www.dotnetnuke.com/Resources/Wiki/Page/DDRMenu-user-guide.aspx

DDRMenu Tokens http://www.dotnetnuke.com/Resources/Wiki/Page/DDRMenu-token-templates.aspx

On any item in the breadcrumb trail:

<ul id="dnn_pnav">
[*>NODE]
</ul>
[>NODE]
    <li>
    [?ENABLED]
        <a href="[=URL]" [?BREADCRUMB]class="breadcrumb"[/?] >[=TEXT]</a>
    [?ELSE]
        <span>[=TEXT]</span>
    [/?]
    [?NODE]
        <ul>
        [*>NODE]
        </ul>
    [/?]
    </li>
[/>]

Only the current node:

<ul id="dnn_pnav">
[*>NODE]
</ul>
[>NODE]
<li>
[?ENABLED]
<a href="[=URL]" [?SELECTED]class="selected"[/?] >[=TEXT]</a>
[?ELSE]
<span>[=TEXT]</span>
[/?]
[?NODE]
<ul>
[*>NODE]
</ul>
[/?]
</li>
[/>]

Additional Pre-developed Templates

For more robust templates and complex examples, download the DDRMenu Templates by Mark Allen from CodePlex. They include treeview, superfish, sitemap, and mega menu.

http://dnnddrmenutemplates.codeplex.com/

Advertisements
Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: