dropdown navigation help

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

Steve 472 posts 1216 karma points

Mar 28, 2014 @ 17:31

I've almost got it to work correctly, but I am haveing problems assigning a "current" class to the correct parts of my navigation. Here is my site: https://edit-wwwprep.rose-hulman.edu/student-life.aspx

The tabs on this page should not be "active", but they are. If you click on one of the tabs it takes you to it's page and is given the "active" class correctly. Also, I can't get the image below the tabs to come in on subsiquent pages. Any help would be appreciated!

@inherits umbraco.MacroEngines.DynamicNodeContext

    @{
        var home = Model.AncestorOrSelf(2);
        var nav = home.Children.Where("Visible");

    <ul>
        @foreach(var item in nav){
            var style = item.IsDescendantOrSelf(Model) ? "class=active" : "";
            <li @style ><a href="@item.Url"><span>@item.Name</span></a>

@* test to see if there are child nodes and if so make the dropdown list *@
                @if(item.Children.Count() > 0){  
                <ul>
            @foreach(var subNav in item.Children){
                var first = subNav.IsFirst() ? "class=first" : "";
                <li @first ><a href="@subNav.Url"><span>@subNav.Name</span></a></li>
            }       
        </ul> 
            }
                </li>
        }
        </ul>
@* test to see if property useAlternateNavigation is checked if not load the image below the tabs *@            
            if(Model.HasValue("useAlternateNavigation")){
    <img src="/static/phase2/tabNavBorderBottom.jpg" class="tabBorder" />
        }
    }

Copy Link

Donald St. Martin 83 posts 128 karma points

Mar 28, 2014 @ 17:51

Steve,

Here is a sample of my navigation code so hopefully it provides some assistance.

foreach (var page in @Model.Children.Where("NodeTypeAlias == @0 or NodeTypeAlias == @1" , "Textpage", "Newsletters").Where("Visible")) {
     var current = Array.IndexOf(Model.Path.Split(','), page.Id.ToString()) >= 0 ? " class=\"current\"" : "";
     <[email protected](current)>
          <a href="@page.Url">@page.Name</a>
     </li>
     if (@page.Children.Count() > 0) {
          <ul>
               @foreach (var subpage in @page.Children.Where("Visible")) {
                    <[email protected](current)><a href="@subpage.Url">@subpage.Name</a></li>                                     
               }
          </ul>         
     }
}

The magic where it happens is:

var current = Array.IndexOf(Model.Path.Split(','), page.Id.ToString()) >= 0 ? " class=\"current\"" : "";

Copy Link

Steve 472 posts 1216 karma points

Mar 28, 2014 @ 20:11
0
The problem I have is that on the main page, I don't want any of the tabs which are children of @Model (current page), but once I get to one of the child pages I do want the children of @Model (current page) to have the "active" class. This is the part that is tripping me up:
```
   @{
        var home = Model.AncestorOrSelf(2);
        var nav = home.Children.Where("Visible");

    <ul>
        @foreach(var item in nav){
            var style = item.IsDescendantOrSelf(Model) ? "class=active" : "";
            <li @style ><a href="@item.Url"><span>@item.Name</span></a>
```
Copy Link
is working on a reply...

Please Sign in or register to post replies