Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Natasha 79 posts 195 karma points
    Nov 23, 2015 @ 17:05
    Natasha
    0

    Multi level menu - 3rd level

    Help

    I have a problem with my multi-level menu in Umbraco 7.3 - it works for level 1& 2 and I found a solution for level 3 but don't know how to reference/call the level 3 pages.

    here is my code:

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage


    @*
    Macro to display child pages below the root page of a standard website.
    Also highlights the current active page/section in the navigation with
    the css class "current".
*@

@{

     var root = CurrentPage.AncestorOrSelf(1); 

}

 <div id="navigation" class="navbar navbar" role="navigation">
   <div class="container">

<ul class="nav navbar-nav">

@foreach (var page in Model.Content.AncestorOrSelf(1).Children.Where("Visible"))
{
   <li>
       @{
           if (page.Children.Where("Visible").Count() > 0)
           {
            <li class="dropdown">
                <a class="dropdown-toggle"href="@page.Url">@page.Name</a>
            <ul class="dropdown-menu" role="menu">

                 @foreach (var subpage in page.Children.Where("Visible"))

                 {
                    <li>        
                        <a href="@subpage.Url">@subpage.Name</a></li>
                        foreach (var childPage in subpage.Children.Where("Visible"))
        {
      <ul>
          <li>
         <a href="@subpage.Url">@subpage.Name</a>
          </li>
    </ul>     
        }
                 }


              </ul>
            </li>
           }else
           {
               <a href="@page.Url">@page.Name</a>
           }
       }
   </li>


}
</ul>



            </div>

                  </div><!--navigation-->

    At the moment it lists the last subpage 4 times as level 3. What do I call the subpage of a subpage? or do I have to do it another way. Any help appreciated I'm pulling my hair out.

    Thanks Natasha

    Copy Link
  • Alex Skrypnyk 6150 posts 24110 karma points MVP 8x admin c-trib
    Nov 23, 2015 @ 17:24
    Alex Skrypnyk
    100

    Hi Natasha,

    Please change nested foreach like that:

    @foreach (var subpage in page.Children.Where("Visible"))

                 {
                    <li>        
                        <a href="@subpage.Url">@subpage.Name</a></li>
                        foreach (var childPage in subpage.Children.Where("Visible"))
        {
      <ul>
          <li>
         <a href="@childPage.Url">@childPage.Name</a>
          </li>
    </ul>     
        }
                 }

    Thanks,

    Oleksandr

    Copy Link
  • Natasha 79 posts 195 karma points
    Nov 24, 2015 @ 02:12
    Natasha
    0

    Thank you so much Alex

    Copy Link
  • Bas Schouten 135 posts 233 karma points
    Nov 25, 2015 @ 13:08
    Bas Schouten
    0

    Is it posible to activate the nested for each only when the upper level is active?

    I'am new to razor and want to use it as Subnavigation. I also saw solutions with helpers.

    Copy Link
  • Alex Skrypnyk 6150 posts 24110 karma points MVP 8x admin c-trib
    Nov 25, 2015 @ 13:34
    Alex Skrypnyk
    0

    Hi Bas,

    Do you want to activate child item when parent is active ?

    Copy Link
  • Bas Schouten 135 posts 233 karma points
    Nov 25, 2015 @ 13:39
    Bas Schouten
    0

    That's exactly what I mean.

    Copy Link
  • Michael Nielsen 153 posts 810 karma points
    Nov 25, 2015 @ 14:07
    Michael Nielsen
    0

    Not quite sure if this is what you mean, but try it.

    @foreach (var subpage in page.Children.Where("Visible")){
  <li><a href="@subpage.Url">@subpage.Name</a></li>
    @if(CurrentPage.Id == subpage.Id){
      foreach (var childPage in subpage.Children.Where("Visible")){
        <ul>
            <li><a href="@childPage.Url">@childPage.Name</a></li>
        </ul>     
      }
    }
}
    Copy Link
  • Bas Schouten 135 posts 233 karma points
    Nov 25, 2015 @ 14:32
    Bas Schouten
    0

    Thanks for your answer. Almost there :-).

    When I enter a subpage the selected subpage disappears. I think i need something like "if currentpage and parentpage are selected".

    I also described this in: https://our.umbraco.org/forum/developers/razor/71192-help-with-left-navigation

    Just searching for the best solution.

    Copy Link
  • Paul 184 posts 646 karma points
    Nov 26, 2015 @ 15:29
    Paul
    0

    In the above example how would I add in dynamic classes on the various menu levels so the resulting html would look like so:

    <ul><li class="grandparent"></li><ul>                   <<level 1 page
<ul><li class="parent"></li><ul>                              <<level 2 page
<ul><li class="child"></li></ul>                                <<level 3 page

<ul><li class="parent"></li></ul>                              <<level 1 page
<ul><li class="child"></li></ul>                                 <<level 2 page

    ? I could obviously hardcode the classes into something like the above, but I want the grandparent, parent and child classes to be dynamic. So if you're on a level 2 page you'll see a parent and child class on the pages on levels 1 & 3, but if you're on a level 3 page you'd see parent and grandparent classes.

    Any ideas on how to do that?

    Edit: Not to worry, I've decided this isn't required.

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft