Geek Answers Handbook

Umbraco 6 shaving menu

Hey. I want to add the "active" class to my li if it is active or if I am on the page under it. I have the following code

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ Layout = null; } <nav class="topNav"> <ul> @foreach (var item in Model.Content.AncestorOrSelf(1).Children.Where(x => x.IsVisible() && x.IsDocumentType("Subfrontpage") || x.IsDocumentType("Procesguide"))) { <li> <a href="@item.Url">@item.Name</a> </li> } </ul> </nav>

I think I can do something about it, but it gives an error

 var isSelected = Model.Path.Contains(item.Id.ToString()) ? "active" : ""; <li class="@Html.Raw(isSelected)"> <a href="@item.Url">@item.Name</a> </li>

This is the error I am getting. Line 10.

 Compilation Error Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. Compiler Error Message: CS1061: 'Umbraco.Web.Models.RenderModel' does not contain a definition for 'Path' and no extension method 'Path' accepting a first argument of type 'Umbraco.Web.Models.RenderModel' could be found (are you missing a using directive or an assembly reference?) Source Error: Line 8: @foreach (var item in Model.Content.AncestorOrSelf(1).Children.Where(x => x.IsVisible() && x.IsDocumentType("Subfrontpage") || x.IsDocumentType("Procesguide"))) Line 9: { Line 10: var isSelected = Model.Path.Contains(item.Id.ToString()) ? "active" : ""; Line 11: Line 12: <li class="@Html.Raw(isSelected)">

Now I tried with this, but not lunk

 <ul> <li> <a href="@home.Url">@home.Name</a> </li> @foreach (var item in Model.Content.AncestorOrSelf(1).Children.Where(x => x.IsVisible() && x.IsDocumentType("Subfrontpage") || x.IsDocumentType("Procesguide"))) { var isSelected = item.IsDescendant(Model,"active", ""); <li class="@Html.Raw(isSelected)"> <a href="@item.Url">@item.Name</a> </li> } </ul>
+4
source share
3 answers

ok here is the solution. This is for typed, not dynamic cshtml.

 @inherits Umbraco.Web.Mvc.UmbracoTemplatePage @{ Layout = null; var home = Model.Content.AncestorOrSelf(1); } <ul> @*Render Home item*@ @{ var homeActive = ""; } @if( home.Id == Model.Content.Id){ homeActive = "active"; } <li class="@homeActive"> <a href="@home.Url"> @home.Name </a> </li> @*Render Home children*@ @foreach (var item in home.Children.Where(x => x.IsVisible())) { var active = ""; if(home.Id != Model.Content.Id){ @* if NOT home *@ if (item.Id == Model.Content.AncestorOrSelf(2).Id){ @* if foreach id and currentpage ancestor id is equal *@ active = "active"; } } <li class="@active"> <a href="@item.Url"> @item.Name </a> </li> } </ul>
+7
source

You can try something like this:

 var isSelected = item.IsDescendant(Model,"active", "");

Here is a list of functions you can use:

 @Model.AncestorOrSelf(string nodeTypeAlias) @Model.AncestorOrSelf(int level) @Model.AncestorOrSelf(Func<DynamicNode, bool> func)

and those auxiliary functions:

 @Model.IsDescendant(DynamicNode[,valueIfTrue][,valueIfFalse]) @Model.IsDescendantOrSelf(DynamicNode[,valueIfTrue][,valueIfFalse])

Link: Is the current page a descendant of a specific node id?

The following is the script value for navigation created by umbraco:

 @inherits umbraco.MacroEngines.DynamicNodeContext @* Macro to display child pages below the root page of a standard website. Also highlights the current active page/section in the navigation with the css class "current". *@ @{ @*Get the root of the website *@ var root = Model.AncestorOrSelf(1); } <ul> @foreach (var page in root.Children.Where("Visible")) { <li class="@page.IsAncestorOrSelf(Model, "current", "")"> <a href="@page.Url">@page.Name</a> </li> } </ul>
0
source

I just created a menu and needed the Home page to be active . Working with the IsAncestorOrSelf method IsAncestorOrSelf not work for the main page.

Part of the code I created is:

 @{ var root = Model.AncestorOrSelf(1); var homeClass = root.Id == Model.Id ? "active" : ""; } <ul id="nav" class="nav navbar-nav pull-right"> <li class="@homeClass"><a href="/" >Home</a></li> @foreach (var page in root.Children.Where("Visible")) { <li class="@page.IsAncestorOrSelf(Model, "active", "")"> <a href="@page.Url">@page.Name</a> </li> } </ul>

This is repeated through all children of the root of node (1). To find out if you are on the Home page, I check the Id on the page and set the active class accordingly.

0
source

More articles:


All Articles