DotNetNuke + XPath = Custom navigation menu DNNMenu HTML render
- by Rui Santos
I'm developing a skin for DotNetNuke 5 using the Component DNN Done Right menu by Mark Alan which uses XSL-T to convert the XML sitemap into an HTML navigation.
The XML sitemap outputs the following structure:
<Root >
<root >
<node id="40" text="Home" url="http://localhost/dnn/Home.aspx" enabled="1" selected="0" breadcrumb="0" first="1" last="0" only="0" depth="0" >
<node id="58" text="Child1" url="http://localhost/dnn/Home/Child1.aspx" enabled="1" selected="0" breadcrumb="0" first="1" last="0" only="0" depth="1" >
<keywords >Child1</keywords>
<description >Child1</description>
<node id="59" text="Child1 SubItem1" url="http://localhost/dnn/Home/Child1/Child1SubItem1.aspx" enabled="1" selected="0" breadcrumb="0" first="1" last="0" only="0" depth="2" >
<keywords >Child1 SubItem1</keywords>
<description >Child1 SubItem1</description>
</node>
<node id="60" text="Child1 SubItem2" url="http://localhost/dnn/Home/Child1/Child1SubItem2.aspx" enabled="1" selected="0" breadcrumb="0" first="0" last="0" only="0" depth="2" >
<keywords >Child1 SubItem2</keywords>
<description >Child1 SubItem2</description>
</node>
<node id="61" text="Child1 SubItem3" url="http://localhost/dnn/Home/Child1/Child1SubItem3.aspx" enabled="1" selected="0" breadcrumb="0" first="0" last="1" only="0" depth="2" >
<keywords >Child1 SubItem3</keywords>
<description >Child1 SubItem3</description>
</node>
</node>
<node id="65" text="Child2" url="http://localhost/dnn/Home/Child2.aspx" enabled="1" selected="0" breadcrumb="0" first="0" last="1" only="0" depth="1" >
<keywords >Child2</keywords>
<description >Child2</description>
<node id="66" text="Child2 SubItem1" url="http://localhost/dnn/Home/Child2/Child2SubItem1.aspx" enabled="1" selected="0" breadcrumb="0" first="1" last="0" only="0" depth="2" >
<keywords >Child2 SubItem1</keywords>
<description >Child2 SubItem1</description>
</node>
<node id="67" text="Child2 SubItem2" url="http://localhost/dnn/Home/Child2/Child2SubItem2.aspx" enabled="1" selected="0" breadcrumb="0" first="0" last="1" only="0" depth="2" >
<keywords >Child2 SubItem2</keywords>
<description >Child2 SubItem2</description>
</node>
</node>
</node>
</root>
</Root>
My Goal is to render this XML block into this HTML Navigation structure only using UL's LI's, etc..
<ul id="topnav">
<li>
<a href="#" class="home">Home</a> <!-- Parent Node - Depth0 -->
<div class="sub">
<ul>
<li><h2><a href="#">Child1</a></h2></li> <!-- Parent Node 1 - Depth1 -->
<li><a href="#">Child1 SubItem1</a></li> <!-- ChildNode - Depth2 -->
<li><a href="#">Child1 SubItem2</a></li> <!-- ChildNode - Depth2 -->
<li><a href="#">Child1 SubItem3</a></li ><!-- ChildNode - Depth2 -->
</ul>
<ul>
<li><h2><a href="#">Child2</a></h2></li> <!-- Parent Node 2 - Depth1 -->
<li><a href="#">Child2 SubItem1</a></li> <!-- ChildNode - Depth2 -->
<li><a href="#">Child2 SubItem2</a></li> <!-- ChildNode - Depth2 -->
</ul>
</div>
</li>
</ul>
Can anyone help with the XSL coding? I'm just starting now with XSL..