Copied to clipboard

Flag this post as spam?

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


  • Beginner 28 posts 78 karma points
    Oct 22, 2014 @ 22:28
    Beginner
    0

    multilevel menu

    Hi!

    I have seen there are differnt examples on multilevel menus, but I can not solve my problem here. I have built it with a bootstrap menu. - The menu-items that contains items is showed twice. Why? "Gallery" is clickable and go to a new page. The "Gallery" that contains items opens the dropdown as it should. I want to remove the first "Gallery"...

    I added my code below, maybe someone knows what I am doing wrong :)?

    Beginner

    Here you can see that the menu items that contain more than one shows twice

  • Beginner 28 posts 78 karma points
    Oct 22, 2014 @ 22:31
    Beginner
    0

    My code goes like this


    @inherits UmbracoTemplatePage
    @{
        // Model.Content is the current page that we're on
        // AncestorsOrSelf is all of the ancestors this page has in the tree
        // (1) means: go up to level 1 and stop looking for more ancestors when you get there
        // First() gets the first ancestor found (the home page, on level 1)
        var homePage = CurrentPage.AncestorsOrSelf(1).First();

        // The menu items we want are all of the children of the homepage
        // We also check if "Hide in navigation" is on in the menu, we shouldn't show hidden items
        var menuItems = homePage.Children.Where("UmbracoNaviHide == false");
        var root = CurrentPage.AncestorOrSelf(1);

    }
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="/">
                    <img src="~/Graphics/Logo.jpg" alt="" class="hidden-xs" />
                    <img src="~/Graphics/Logo-small.jpg" alt="" class="visible-xs" />
                </a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="/">Home</a>
                    </li>
                    @foreach (var item in menuItems)
                    {
                        <li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)">
                            <a href="@item.Url">@item.Name</a>
                        </li>
                        var subMenuItems = item.Children.Where("Visible");
                        if (subMenuItems.Count() > 0)
                        {
                            <li class="dropdown">
                                <a class="dropdown-toggle" href="#" data-toggle="dropdown">@item.Name <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    @foreach (var sub in subMenuItems)
                                    {
                                        <li><a class="parent" href="@sub.Url">@sub.Name</a></li>
                                    }
                                </ul>
                            </li>
                        }
                    }
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
    <div class="green-border"></div>

  • Phill 115 posts 288 karma points
    Oct 23, 2014 @ 05:25
    Phill
    1

    Change your foreach to the following:

    @foreach (var item in menuItems)
                    {
                        var subMenuItems = item.Children.Where("Visible");
                        if (subMenuItems.Count() > 0)
                        {
                            <li class="dropdown">
                                <a class="dropdown-toggle" href="#" data-toggle="dropdown">@item.Name <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    @foreach (var sub in subMenuItems)
                                    {
                                        <li><a class="parent" href="@sub.Url">@sub.Name</a></li>
                                    }
                                </ul>
                            </li>
                        }else{

                        <li class="@(CurrentPage.Id == item.Id ? "current_page_item" : null)">
                            <a href="@item.Url">@item.Name</a>

                        </li>

    }
                    }

    There are probably cleaner ways to do this but that should be a quick fix.

  • Beginner 28 posts 78 karma points
    Oct 23, 2014 @ 08:22
    Beginner
    0

    Thanks a lot, it works!

Please Sign in or register to post replies

Write your reply to:

Draft