Sign in Register
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

    Copy Link
  • 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> 
    Copy Link
  • 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

    Copy Link
  • Kate 267 posts 610 karma points
    Jan 21, 2014 @ 18:13
    Kate
    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
    Dennis Aaen
    0

    Hi Kate,

    Fantastic! that  I could help you.

    /Dennis

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies