more issues with razor menu

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

Scott Robinson 54 posts 75 karma points

Jun 17, 2013 @ 18:35

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>

Copy Link
Dan White 206 posts 510 karma points c-trib

Jun 17, 2013 @ 18:54

0

Scott,

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

Copy Link
Jonas Eriksson 930 posts 1825 karma points

Jun 17, 2013 @ 19:06

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())

Copy Link
Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Jun 25, 2013 @ 12:47

0

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

Copy Link
Arlan 58 posts 184 karma points

May 04, 2015 @ 22:58

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">



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



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

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?