add class selected to parent item in nav

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Amir Khan 1287 posts 2744 karma points

Feb 14, 2012 @ 20:47

Hi, I have this code which is working great for generating a 2 level dropdown menu and applying the class "selected" to the current page of the top level. How can I adjust it so that the class "current" is applied to the top level when you're on one of its children also?

Thanks!

Amir

@inherits umbraco.MacroEngines.DynamicNodeContext
<ul class="sf-menu">
    <li><a href="/">Home</a> </li>
    @foreach (var page in @Model.AncestorOrSelf(1).Children.Where("Visible"))
    {
        string style = "";
        if (Model.Id == page.Id) { style = "class=\"selected\""; }
        <li>
            <a href="@page.Url" @Html.Raw(style)>@page.Name</a>

            @if (page.Children != null && page.Children.Count() > 0)
            {
                <ul>
                @foreach (dynamic secondPage in page.Children.Where("Visible"))
                 {
                    <li>
                         <a href="@secondPage.Url">@secondPage.Name</a>
                    </li>
                }
                </ul>
            }
        </li>
    }
</ul>

Copy Link

Amir Khan 1287 posts 2744 karma points

Feb 14, 2012 @ 21:15

Here it is: http://our.umbraco.org/forum/developers/razor/25086-Top-Menu-active-when-sub-page-selected

Complete Code Below:

@inherits umbraco.MacroEngines.DynamicNodeContext
<ul class="sf-menu">
    <li><a href="/">Home</a> </li>
    @foreach (var page in @Model.AncestorOrSelf(1).Children.Where("Visible"))
    {
        string style = "";
        <li class="@Model.IsDescendantOrSelf(page,"selected", "")">
            <a href="@page.Url" @Html.Raw(style)>@page.Name</a>

            @if (page.Children != null && page.Children.Count() > 0)
            {
                <ul>
                @foreach (dynamic secondPage in page.Children.Where("Visible"))
                 {
                    <li>
                         <a href="@secondPage.Url">@secondPage.Name</a>
                    </li>
                }
                </ul>
            }
        </li>
    }
</ul>

Copy Link

is working on a reply...

Please Sign in or register to post replies