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
thisGet 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> 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> 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>