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
    Kate
    0

    navigation with nested ul

    Hi

    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

  • Fuji Kusaka 2203 posts 4220 karma points
    Jan 21, 2014 @ 17:50
    Fuji Kusaka
    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> 
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Jan 21, 2014 @ 17:52
    Dennis Aaen
    100

    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

  • Kate 267 posts 610 karma points
    Jan 21, 2014 @ 18:13
    Kate
    1

    Hi Dennis

    It was exactly what I need.

    Thanks

    /Kate

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Jan 21, 2014 @ 19:12
    Dennis Aaen
    0

    Hi Kate,

    Fantastic! that  I could help you.

    /Dennis

Please Sign in or register to post replies

Write your reply to:

Draft