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


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