navigation with nested ul

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

Kate 267 posts 610 karma points

Jan 21, 2014 @ 16:50

I have navigation structur that looks like this.

<ul>
     <li><a href="#">Company</a>
           <ul class="sub-nav">
               <li><a href="#">service1</a></li>
              <li><a href="#">service1</a></li>
          </ul>
     </li>
    <li><a href="#">Services</a>
          <ul class="sub-nav">
               <li><a href="#">service1</a></li>
              <li><a href="#">service1</a></li>
          </ul>
   </li>
   <li><a href="#">Contact</a></li>
</ul>

I need the "sub-nav" items/li to be visible all the time.

How do I do this?

/Kate

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Jan 21, 2014 @ 17:50
2
Hi kate,

You can get this navigation working like like. However for the sub nav class="sub-nav" to be visible at all time you will need to configure this in your css stylesheet.

var nav = Model.AncestorOrSelf(1).Descendants("docTypeName").Where("Visible").Items;
```
<ul>
@foreach(var n in nav){
<li><a href="@n.Url">@n.Name</a>
@if(n.Children.Where("Visible").Any()){
<ul class="sub-nav">
@foreach(var s in n.Children.Where("Visible")){
<li><a href="@s.Url">@s.Name</a></li>
}
</ul>
}
}
</ul> 
```
Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jan 21, 2014 @ 17:52

Hi Kate,

I will try to help you. With th code below you should get the printed the navigation structure, that you have described.

@inherits umbraco.MacroEngines.DynamicNodeContext

@{ 
    @*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>
                @if (page.Childen != null && page.Children.Count() > 0)
            {
                <ul class="sub-nav">
                @foreach (dynamic subpage in page.Children.Where("Visible")){
                    <li class="@subpage.IsAncestorOrSelf(Model, "current", "")">
                         <a href="@subpage.Url">@subpage.Name</a>
                    </li>
                }
                </ul>
            }
        </li>
    }
</ul>

Hope this helps.

/Dennis

Copy Link

Kate 267 posts 610 karma points

Jan 21, 2014 @ 18:13

1

Hi Dennis

It was exactly what I need.

Thanks

/Kate

Copy Link
Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jan 21, 2014 @ 19:12

0

Hi Kate,

Fantastic! that I could help you.

/Dennis

Copy Link
is working on a reply...

Please Sign in or register to post replies