I have 5 levels in my navigation. When I'm on my second level I want the third level to dispay underneath the second one, but all other third levels in the navigation should be hidden.This works fine when I click the second one, but when I want the third level page to be selected it dissapears.
Here is the code I'm using, can anyone help with this?
@inherits umbraco.MacroEngines.DynamicNodeContext
@helper traverse(dynamic node){
var items = node.Children.Where("Visible"); foreach (var item in items) { var mylevel = ""; var aClass = ""; if(@Model.Id == item.Id) { switch((int)item.Level) { case 3: mylevel ="secondlevelliselected"; aClass ="secondLevelSelected"; break; case 4: mylevel ="thirdlevelliselected"; aClass ="thirdLevelSelected"; break; case 5: mylevel ="frothlevelliselected"; aClass ="forthLevelSelected"; break; } } else { switch((int)item.Level) { case 3: mylevel ="secondlevelli"; aClass ="secondLevel"; break; case 4: mylevel ="thirdlevelli"; aClass ="thirdLevel"; break; case 5: mylevel ="forthlevelli"; aClass ="forthLevel"; break; } } <li class="@mylevel"> <a href="@item.Url" class="@aClass">@item.Name</a> </li> if(item.Id == @Model.Id) { @traverse(item) }
I'm not sure what's going on, but it sounds like it's not really a Razor problem.
I suggest you build what you want in pure HTML first and when that works like you want it, compare the HTML version to the HTML that's being produced by this snippet. I'm pretty sure it's just a styling / javascript issue somewhere.
If this is your XSLT then the HTML surely isn't correct, as I see all kinds of differences in the casing of the CSS class names, which I assume are used by javascript to render your menu.
So my recommendation stands, try to figure out which are the exact differences between the output of your XSLT and your Razor template.
Right now, this code is pretty difficult to read and I am unsure of its intention without looking at it long and hard. If you can point me to a particual problem area in your Razor code, I can help you out (for example: "the nodes on level 3 aren't rendering, when I am in debug mode, I see that I get in the else statement, but ... " something like that).
I also fixed up the html. You should be able to select anything you need with this, much neater though. putting selected on li and a is redundant as you can get it with 'li.selected a'
Help with Navigation
Hi,
I have 5 levels in my navigation. When I'm on my second level I want the third level to dispay underneath the second one, but all other third levels in the navigation should be hidden.This works fine when I click the second one, but when I want the third level page to be selected it dissapears.
Here is the code I'm using, can anyone help with this?
@inherits umbraco.MacroEngines.DynamicNodeContext
@helper traverse(dynamic node){
var items = node.Children.Where("Visible");
foreach (var item in items) {
var mylevel = "";
var aClass = "";
if(@Model.Id == item.Id)
{
switch((int)item.Level)
{
case 3:
mylevel ="secondlevelliselected";
aClass ="secondLevelSelected";
break;
case 4:
mylevel ="thirdlevelliselected";
aClass ="thirdLevelSelected";
break;
case 5:
mylevel ="frothlevelliselected";
aClass ="forthLevelSelected";
break;
}
}
else
{
switch((int)item.Level)
{
case 3:
mylevel ="secondlevelli";
aClass ="secondLevel";
break;
case 4:
mylevel ="thirdlevelli";
aClass ="thirdLevel";
break;
case 5:
mylevel ="forthlevelli";
aClass ="forthLevel";
break;
}
}
<li class="@mylevel">
<a href="@item.Url" class="@aClass">@item.Name</a>
</li>
if(item.Id == @Model.Id)
{
@traverse(item)
}
}
}
<div class="sitemap">
<ul id="sub_navlist">
@traverse(@Model.AncestorOrSelf(2))
</ul>
</div>
I'm not sure what's going on, but it sounds like it's not really a Razor problem.
I suggest you build what you want in pure HTML first and when that works like you want it, compare the HTML version to the HTML that's being produced by this snippet. I'm pretty sure it's just a styling / javascript issue somewhere.
Hi,
The HTML is correct. the problem is that I'm converting this xslt to razor. Not sure how to break the loop to get correct functionality.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:Stylesheet [
<!ENTITY nbsp " ">
]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:umbraco.library="urn:umbraco.library"
exclude-result-prefixes="msxml umbraco.library">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:param name="startLevel" select="2"/>
<xsl:template match="/">
<xsl:if test="count($currentPage/ancestor-or-self::*[@isDoc] [@level = $startLevel]/*[@isDoc] ) > 0">
<xsl:for-each select="$currentPage/ancestor-or-self::*[@isDoc] [@level=$startLevel]/*[@isDoc][string(umbracoNaviHide) != '1' and string(mytest) != '0' ] ">
<xsl:call-template name="drawnode">
<xsl:with-param name="level" select="2"/>
</xsl:call-template>
</xsl:for-each>
</xsl:if>
</xsl:template>
<xsl:template name="drawnode">
<xsl:param name="level"/>
<li>
<xsl:choose>
<xsl:when test="@id=$currentPage/@id">
<xsl:if test="$level = 2">
<xsl:attribute name="class">secondlevelliselected</xsl:attribute>
</xsl:if>
<xsl:if test="$level = 3">
<xsl:attribute name="class">thirdlevelliselected</xsl:attribute>
</xsl:if>
<xsl:if test="$level = 4">
<xsl:attribute name="class">frothlevelliselected</xsl:attribute>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$level = 2">
<xsl:attribute name="class">secondlevelli</xsl:attribute>
</xsl:if>
<xsl:if test="$level = 3">
<xsl:attribute name="class">thirdlevelli</xsl:attribute>
</xsl:if>
<xsl:if test="$level = 4">
<xsl:attribute name="class">forthlevelli</xsl:attribute>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:choose>
<xsl:when test="@id=$currentPage/@id">
<xsl:if test="$level = 2">
<xsl:attribute name="class">secondLevelSelected</xsl:attribute>
</xsl:if>
<xsl:if test="$level = 3">
<xsl:attribute name="class">thirdLevelSelected</xsl:attribute>
</xsl:if>
<xsl:if test="$level = 4">
<xsl:attribute name="class">forthLevelSelected</xsl:attribute>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$level = 2">
<xsl:attribute name="class">secondLevel</xsl:attribute>
</xsl:if>
<xsl:if test="$level = 3">
<xsl:attribute name="class">thirdLevel</xsl:attribute>
</xsl:if>
<xsl:if test="$level = 4">
<xsl:attribute name="class">forthLevel</xsl:attribute>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<xsl:value-of select="@nodeName"/>
</a>
</li>
<xsl:if test="count(descendant-or-self::*[@isDoc] [@id=$currentPage/@id]) > 0 ">
<xsl:for-each select="*[@isDoc ][string(umbracoNaviHide) != '1' ] [@nodeTypeAlias = 'Frett'= 0 and string(mytest) != '0']">
<xsl:call-template name="drawnode">
<xsl:with-param name="level" select="$level +1"/>
</xsl:call-template>
</xsl:for-each>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
If this is your XSLT then the HTML surely isn't correct, as I see all kinds of differences in the casing of the CSS class names, which I assume are used by javascript to render your menu.
So my recommendation stands, try to figure out which are the exact differences between the output of your XSLT and your Razor template.
Right now, this code is pretty difficult to read and I am unsure of its intention without looking at it long and hard. If you can point me to a particual problem area in your Razor code, I can help you out (for example: "the nodes on level 3 aren't rendering, when I am in debug mode, I see that I get in the else statement, but ... " something like that).
Sorry to bring back an old post, but I found the base code useful and fixed up the error where children wouldn't display.
The problem is bascially in this line
if(item.Id == @Model.Id)
as it only checks in the parent node is the current node so it never is true with child nodes.
I wasn't sure how to use the .Where stuff so I did this, which checks the children as well
I also fixed up the html. You should be able to select anything you need with this, much neater though. putting selected on li and a is redundant as you can get it with 'li.selected a'
@inherits umbraco.MacroEngines.DynamicNodeContext
@helper traverse(dynamic node){
<ul>
@{
var items = node.Children.Where("Visible");
foreach (var item in items) {
var mylevel = "";
if(@Model.Id == item.Id)
{
mylevel ="class=selected";
}
<li @mylevel>
<a href="@item.Url" >@item.Name</a>
</li>
if(item.Id == @Model.Id)
{
@traverse(item)
}
else{
foreach(var child in item.Children){
if(child.Id == @Model.Id){@traverse(item);break;}
}
}
}
}
</ul>
}
<div class="sitemap">
@traverse(@Model.AncestorOrSelf(2))
</div>
is working on a reply...