DDRMenu Tips & Tricks

Return to previous page

  • 4/7/2015
  • 5007 Views

Comments

5007 Views

DDRMenu Tips & Tricks

Last updated 3 years ago

Comments

Common

(Enter the content of this article below)

Advanced

 
This page will contain Tips & Tricks for the DDRMenu

Add non page menu items

If you want to dynamically add menu items you are better of using the NodeManipulator option. However if You want to add links to other pages and don't want to set up a tab with redirect for each page you just modify the root template to contain the links you need


<xsl:template match="root">
<ul>
<xsl:apply-templates select="node" />
<li><a href="http://www.2dnn.com">2DNN</a></li>
<li><a href="http://www.snowcovered.com">SnowCovered</a></li>
</ul>
</xsl:template>

Different levels, different HTML

A lot of online examples for mega, or other fancy menu's require different HTML structure for each of the levels. This can be accomplished in an XSL template in the following way.


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/*">
<xsl:apply-templates select="root" />
</xsl:template>
<xsl:template match="root">
<ul>
<xsl:apply-templates select="node">
<xsl:with-param name="level" select="0"/>
</xsl:apply-templates>
</ul>
</xsl:template>
<xsl:template match="node">
<xsl:param name="level" />
<xsl:choose>
<xsl:when test="$level=0">
<!-- Your html-->
</xsl:when>
<xsl:when test="$level=1">
<!-- Your html-->
</xsl:when>
<xsl:when test="$level=2">
<!-- Your html-->
</xsl:when>
<xsl:otherwise>
<!-- default html-->
<li>
<xsl:choose>
<xsl:when test="@enabled = 1">
<a href="{@url}">
<xsl:value-of select="@text" />
</a>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@text" />
</xsl:otherwise>
</xsl:choose>
<xsl:if test="node">
<ul>
<xsl:apply-templates select="node">
<xsl:with-param name="level" select="$level + 1" />
</xsl:apply-templates>
</ul>
</xsl:if>
</li>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Outputting different level navs

If you ever need to dynamically output two different levels of menu in the same skin the following blog link shows how to do this:


Using a vertical menu

To use vertical menus you can either define your template to render vertical code, or utilise the ControlOrientation setting.

<ddr:MENU MenuStyle="Mega1" runat="server">

<ClientOptions>
<ddr:ClientString Name="ControlOrientation" Value="Vertical" />
</ClientOptions>
< /ddr:MENU>

Armand Datema has a short video which demonstrates how to do this

Get access to skin path in your menu

Sometimes its handy to be able to get the skin path in your menu especially if using images in your skin. Add the following to the top of your skin just below the xsl:stylesheet tag

<xsl:param name="SkinPath"></xsl:param>

then you can have images in your menu like this:

<img>

<xsl:attribute name="src"><xsl:value-of select="$SkinPath"/>myimage.png</xsl:attribute>
</img>

Bootstrap3 Nav Template

Use this template for your Bootstrap3 based skins


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="/*">
<xsl:apply-templates select="root" />
</xsl:template>
<xsl:template match="root">
<ul class="nav navbar-nav">
<xsl:apply-templates select="node">
<xsl:with-param name="level" select="0"/>
</xsl:apply-templates>
</ul>
</xsl:template>
<xsl:template match="node">
<xsl:param name="level" />
<xsl:choose>
<xsl:when test="$level=0">
<li>
<xsl:attribute name="class">
<xsl:if test="@breadcrumb = 1">active</xsl:if>
<xsl:if test="node">
<xsl:text>&#32;dropdown</xsl:text>
</xsl:if>
</xsl:attribute>
<xsl:choose>
<xsl:when test="@enabled = 1">
<a href="{@url}">
<xsl:attribute name="class">
<xsl:if test="node">
<xsl:text>dropdown-toggle</xsl:text>
</xsl:if>
</xsl:attribute>
<xsl:if test="node">
<xsl:attribute name="data-toggle">dropdown</xsl:attribute>
</xsl:if>
<xsl:value-of select="@text" />
<xsl:if test="node">
<b class="caret"></b>
</xsl:if>
</a>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@text" />
</xsl:otherwise>
</xsl:choose>
<xsl:if test="node">
<ul class="dropdown-menu">
<xsl:apply-templates select="node">
<xsl:with-param name="level" select="$level + 1" />
</xsl:apply-templates>
</ul>
</xsl:if>
</li>
</xsl:when>
<xsl:otherwise>
<li>
<xsl:attribute name="class">
<xsl:if test="@breadcrumb = 1">active</xsl:if>
<xsl:if test="node">
<xsl:text>&#32;dropdown</xsl:text>
</xsl:if>
</xsl:attribute>
<xsl:choose>
<xsl:when test="@enabled = 1">
<a href="{@url}">
<xsl:value-of select="@text" />
</a>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@text" />
</xsl:otherwise>
</xsl:choose>
</li>
<xsl:if test="node">
<!-- no extra level in default bootstrap -->
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Contents
No sections defined
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out