Copied to clipboard

Flag this post as spam?

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


  • Scott Robinson 54 posts 75 karma points
    Jun 17, 2013 @ 18:35
    Scott Robinson
    0

    More issues with Razor Menu

    I've had no end of difficulty with my razor menu. With this version in which I can get dropdown functionality working as it should with Zurb Foundation it stops at the first menu item and displays no more. As in the children of the homepage Parent (not the dropdowns) that display horizontally. Can anyone help?

    -------

     

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        Layout = null;
        var home = Model.Content.AncestorOrSelf(1);
    }
    <section class="top-bar-section">
    <ul id="topNavigation">   
        @*Render Home item*@

        @{ var homeActive = ""; }

        @if( home.Id == Model.Content.Id){
            homeActive = "active";
        }
        <li class="@homeActive">
            <a href="@home.Url">
                @home.Name              
            </a>
        </li>

        @*Render Home children   *@
        @foreach (var item in home.Children.Where(x => x.IsVisible()))
        {                      
            var active = "";
            var hasChildren=item.Children.Where("Visible").Count()>0;
           
            var drop = hasChildren?"has-dropdown":"";
           
            if(home.Id != Model.Content.Id){ @* if NOT home*@
                if (item.Id == Model.Content.AncestorOrSelf(2).Id){
                    @* if foreach id and currentpage ancestor id is equal *@
                    active = "active";
                }
            }         
            <li class="@active @drop">                            
                <a href="@item.Url">
                    @item.Name                  
                </a>
               
                @if(hasChildren)
                {
                    <ul class="dropdown">
                        @foreach(var child in item.Children.Where("Visible"))
                        {
                            <li>@child.Name</li>
                        }
                    </ul>
                }
            </li>
        }
    </ul>
        </section>

  • Dan White 206 posts 510 karma points c-trib
    Jun 17, 2013 @ 18:54
    Dan White
    0

    Scott,

    It seems to work fine for me. What's your Content tree structure look like?

  • Jonas Eriksson 930 posts 1825 karma points
    Jun 17, 2013 @ 19:06
    Jonas Eriksson
    0

    Hi, I think it should not be the reason to why things does not work as expected, but you're mixing dynamic and static syntax, which is not nessesary

    item.Children.Where("Visible").Count()>0

    could be written as

    item.Children.Any(c=>c.IsVisible())

    and

    item.Children.Where("Visible")

    as

    item.Children.Where(c=>c.IsVisible())

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Jun 25, 2013 @ 12:47
    Jeavon Leopold
    0

    Hi, you might find this package helpful, it installs a single Partial view that can be used and customised for rendering navigation.

  • Arlan 58 posts 184 karma points
    May 04, 2015 @ 22:58
    Arlan
    0

    here is another way (not the best but works)

     

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

    @{

        var home = CurrentPage.AncestorOrSelf(1);

        var selection = CurrentPage.AncestorOrSelf(1).Children.Where("Visible");

     }

              <div class="contain-to-grid sticky">

                <nav class="top-bar" data-topbar role="navigation" data-options="sticky_on: [small,medium]; scrolltop: false; mobile_show_parent_link: true">

                  <ul class="title-area">

                    <li class="name hide-for-large-up"><h1>Menu</h1></li>

                    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>

                  </ul>

                  <section class="top-bar-section">

                    <!-- search secondary -->

                    <ul class="search-secondary-container left show-for-small-only">

                      <li class="has-form">

                        <div class="row collapse">

                          <div class="large-8 small-9 columns">

                            <input type="text" placeholder="Search">

                          </div>

                          <div class="large-4 small-3 columns">

                            <a href="#" class="button expand">Search</a>

                          </div>

                        </div>

                      </li>

                      

                    </ul>

                    <!-- /search secondary -->

                    <ul class="left">

                        <li class="@([email protected] ? "active" : null)"><a href="@home.Url">@home.Name</a></li>

                        <li class="divider"></li>                    

                        @foreach(var itemLevel2 in selection)

                        {@*iterate through all children nodes of level1*@                    

                        var itemLevel2HasChildren = itemLevel2.Children.Where("Visible").Count()>0;@*check if node on level2 has children*@

                        if(itemLevel2HasChildren){

                        @*node on level2 has children*@

                        <li class="@("has-dropdown " + (itemLevel2.IsAncestorOrSelf(CurrentPage) ? "active" : null))"><a href="@itemLevel2.Url">@itemLevel2.Name</a>

                            <ul class="dropdown">@*set dropdown on node*@                       

                            @foreach(var itemLevel3 in itemLevel2.Children.Where("Visible")){@*iterate through all children nodes of level2*@                        

                            var itemLevel3HasChildren = itemLevel3.Children.Where("Visible").Count()>0;@*check if node on level3 has children*@                        

                                if(itemLevel3HasChildren){@*node on level3 has children*@

                                <li class="@("has-dropdown " + (itemLevel3.IsAncestorOrSelf(CurrentPage) ? "active" : null))"><a href="@itemLevel3.Url">@itemLevel3.Name</a>                                

                                    <ul class="dropdown">@*set dropdown on node*@                                

                                    @foreach (var itemLevel4 in itemLevel3.Children.Where("Visible")){@*iterate through all children nodes of level3*@

                                        <li class="@(itemLevel4.IsAncestorOrSelf(CurrentPage) ? "active" : null)"><a href="@itemLevel4.Url">@itemLevel4.Name</a></li>

                                    }

                                    </ul>

                                </li>

                                }

                                else{@*node on level3 has no children*@                            

                                <li class="@(itemLevel3.IsAncestorOrSelf(CurrentPage) ? "active" : null)"><a href="@itemLevel3.Url">@itemLevel3.Name</a></li>

                                }

                            }

                            </ul>

                        </li>

                        }else{

                        @*node on level2 has no children*@

                        <li class="@(itemLevel2.IsAncestorOrSelf(CurrentPage) ? "active" : null)"><a href="@itemLevel2.Url">@itemLevel2.Name</a></li>

                        }

                        @*to each node on level2 add a divider to its right*@

                        <li class="divider"></li>

                        }

                      </ul>                

                  </section>

                </nav>

              </div>

Please Sign in or register to post replies

Write your reply to:

Draft