Base solution for your next web application
Open Closed

Menu tree #2455

User avatar
0
giel83 created

Hi!

I am creating a menu-tree, which looks as following: Menu A -> Submenu A -> Submenu item A -> Submenu item B

Now, when I click on submenu item A or B, the entire menu tree closes. I want the tree to stay opened when I click on Submenu item A or B. I think I'm doing something wrong in the MpaNavigationProvider and PageNames class. But i'm not sure what is going wrong there.

(P.S, it's a MPA project)

Help is much appreciated! Thanks :)

Go to accepted answer
3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    There was a problem related to this and it is solved with this issue <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/issues/108">https://github.com/aspnetzero/aspnet-zero/issues/108</a>. Can you try to implement it for your solution and see if this fixes your problem.

    Thanks.

  • User Avatar
    0
    giel83 created

    Thanks, works like a charm :).

    For others, this is what I did exactly:

    Added the following class to MpaNavigationProvider.cs

    public static class UserMenuItemExtensions
    {
        public static bool IsMenuActive(this UserMenuItem menuItem, string currentPageName)
        {
            if (menuItem.Name == currentPageName)
            {
                return true;
            }

            if (menuItem.Items != null)
            {
                foreach (var subMenuItem in menuItem.Items)
                {
                    if (subMenuItem.IsMenuActive(currentPageName))
                    {
                        return true;
                    }
                }
            }

            return false;
        }
    }

    Updated _sidebar.cshtml

    From

    <div class="page-sidebar navbar-collapse collapse">
    
    
    
    
    
    
    <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
        @for (var i = 0; i < Model.Menu.Items.Count; i++)
        {
            var menuItem = Model.Menu.Items[i];
            var isActive = Model.CurrentPageName == menuItem.Name ||
                           (!menuItem.Items.IsNullOrEmpty() && menuItem.Items.Any(item => item.Name == Model.CurrentPageName));
                <li class="@(i==0 ? "start" : "") @(isActive ? "active" : "")">
                @if (menuItem.Items.IsNullOrEmpty())
                {
                    <a href="@calculateMenuUrl(menuItem.Url)">
                        <i class="@menuItem.Icon"></i>
                        <span class="title">@menuItem.DisplayName</span>
                    </a>
                }
                else
                {
                    <a href="javascript:;" class="auto">
                        <i class="@menuItem.Icon"></i>
                        <span class="title">@menuItem.DisplayName</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu">
                        @foreach (var childMenuItem in menuItem.Items)
                        {
                                <li class="@(Model.CurrentPageName == childMenuItem.Name ? "active" : "")">
                                @if (childMenuItem.Items.IsNullOrEmpty())
                                {
                                    <a href="@calculateMenuUrl(childMenuItem.Url)">
                                        <span><i class="sub-menu-icon @childMenuItem.Icon"></i> @childMenuItem.DisplayName</span>
                                    </a>
                                }
                                else
                                {
                                    <a href="javascript:;" class="auto">
                                        <i class="@childMenuItem.Icon"></i>
                                        <span class="title">@childMenuItem.DisplayName</span>
                                        <span class="arrow"></span>
                                    </a>
                                    <ul class="sub-menu">
                                        @foreach (var secondLevelChildMenuItem in childMenuItem.Items)
                                        {
                                                <li class="@(Model.CurrentPageName == secondLevelChildMenuItem.Name ? "active" : "")">
                                                <a href="@calculateMenuUrl(secondLevelChildMenuItem.Url)">
                                                    <span><i class="sub-menu-icon @secondLevelChildMenuItem.Icon"></i> @secondLevelChildMenuItem.DisplayName</span>
                                                </a>
                                            </li>
                                        }
                                    </ul>
                                }
                            </li>
                        }
                    </ul>
                }
            </li>
        }
    </ul>
</div>

    To

    <div class="page-sidebar navbar-collapse collapse">
    
    
    
    
    
    
    <ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
        @for (var i = 0; i < Model.Menu.Items.Count; i++)
        {
            var menuItem = Model.Menu.Items[i];
            var isActive = Model.CurrentPageName == menuItem.Name ||
                           (!menuItem.Items.IsNullOrEmpty() && menuItem.Items.Any(item => item.Name == Model.CurrentPageName));
            <li class="@(i==0 ? "start" : "") @(menuItem.IsMenuActive(Model.CurrentPageName) ? "active" : "")">
                @*<li class="@(i==0 ? "start" : "") @(isActive ? "active" : "")">*@
                @if (menuItem.Items.IsNullOrEmpty())
                {
                    <a href="@calculateMenuUrl(menuItem.Url)">
                        <i class="@menuItem.Icon"></i>
                        <span class="title">@menuItem.DisplayName</span>
                    </a>
                }
                else
                {
                    <a href="javascript:;" class="auto">
                        <i class="@menuItem.Icon"></i>
                        <span class="title">@menuItem.DisplayName</span>
                        <span class="arrow"></span>
                    </a>
                    <ul class="sub-menu">
                        @foreach (var childMenuItem in menuItem.Items)
                        {
                            <li class="@(childMenuItem.IsMenuActive(Model.CurrentPageName) ? "active" : "")">
                                @*<li class="@(Model.CurrentPageName == childMenuItem.Name ? "active" : "")">*@
                                @if (childMenuItem.Items.IsNullOrEmpty())
                                {
                                    <a href="@calculateMenuUrl(childMenuItem.Url)">
                                        <span><i class="sub-menu-icon @childMenuItem.Icon"></i> @childMenuItem.DisplayName</span>
                                    </a>
                                }
                                else
                                {
                                    <a href="javascript:;" class="auto">
                                        <i class="@childMenuItem.Icon"></i>
                                        <span class="title">@childMenuItem.DisplayName</span>
                                        <span class="arrow"></span>
                                    </a>
                                    <ul class="sub-menu">
                                        @foreach (var secondLevelChildMenuItem in childMenuItem.Items)
                                        {
                                            <li class="@(secondLevelChildMenuItem.IsMenuActive(Model.CurrentPageName) ? "active" : "")">
                                                @*<li class="@(Model.CurrentPageName == secondLevelChildMenuItem.Name ? "active" : "")">*@
                                                <a href="@calculateMenuUrl(secondLevelChildMenuItem.Url)">
                                                    <span><i class="sub-menu-icon @secondLevelChildMenuItem.Icon"></i> @secondLevelChildMenuItem.DisplayName</span>
                                                </a>
                                            </li>
                                        }
                                    </ul>
                                }
                            </li>
                        }
                    </ul>
                }
            </li>
        }
    </ul>

</div>
  • User Avatar
    0
    ismcagdas created
    Support Team

    I'm glad that it worked for you :)

Assignee
No one
Labels
Non yet