Could sub-menus also be added to the menu?

[suatsuphi]

Merhaba,

Could sub-menus also be added to the menu?

https://ibb.co/GVbJ4bC there is a Terms Of Use menu under the sub menu in the example

[suatsuphi]

Hi, could you add this feature to 5.2?

[suatsuphi]

Hi,

I made an arrangement as follows.

@using Smartstore.Web.Rendering.Menus
@using Smartstore.Collections
@using Smartstore.Core.Content.Menus

@model MenuModel
<style>
     
    .navbar :hover > .dropdown-item {
        background-color: var(--dropdown-link-active-bg);
    }
     
    .navbar .dropdown-menu div > .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        z-index: 1000;
        top: -8px !important;
        left: 0px !important;
        margin-left: 212px;
    }

    .navbar .dropdown-menu div:hover > .dropdown-menu {
        opacity: 1;
        display: block;
        visibility: visible;
    }

</style>
@{
    Layout = "";

    if (Model.Root == null)
    {
        return;
    }

    var cutOffItems = Model.Root.Children
        .Where(x => x.Value.Id != "brand" && x.GetMetadata<bool>("spare", false))
        .ToList();
}

<div class="megamenu simple">

    @*TODO: (core) Find a better solution, maybe by extending ViewExpander *@

    @{
        await Html.RenderPartialAsync("Components/Menu/Navbar", Model);
    }
</div>

<div class="megamenu-dropdown-container simple">
    @foreach (var node in Model.Root.Children)
    {
        <div id="[email protected]" data-id="@node.Value.Id">
            @{
                await CreateDrilldownMenuAsync(node.Children, true);
            }
        </div>
    }

    <div sm-if="cutOffItems.Any()" id="dropdown-menu--1" data-id="-1">
        @{
            await CreateDrilldownMenuAsync(cutOffItems, true);
        }
    </div>
</div>

@{
    async Task CreateDrilldownMenuAsync(IEnumerable<TreeNode<MenuItem>> nodes, bool isRoot)
    {
        if (isRoot)
        {
            @Html.Raw("<div class='dropdown-menu'>")
        }

        foreach (var node in nodes.Where(x => x.Value.Visible))
        {
            var item = node.Value;
            var itemUrl = item.GenerateUrl(this.ViewContext);
            var itemState = node.GetNodePathState(Model.Path);

            var attrs = item.GetCombinedAttributes().PrependCssClass("dropdown-item" + ((itemState & NodePathState.Selected) == NodePathState.Selected ? " selected" : ""));

            <div id="[email protected]" data-id="@item.Id" attr-class='(node.HasChildren, "dropdown-group")'>
                <a href="@itemUrl" attrs="@attrs">
                    <span sm-language-attributes-for="item">@item.Text</span>
                </a>
                @if (node.HasChildren)
                {
                    await CreateDrilldownMenuAsync(node.Children, node.HasChildren);
                }
            </div>

        }

        if (isRoot)
        {
            @Html.Raw("</div>")
        }
    }
}

<script>
    $(function () {
        $(".megamenu-container").megaMenu();
    });
</script>

[suatsuphi]

Can it be added to 5.2.0?

css

<style>

     
    .navbar .dropdown-group:hover > .dropdown-item {
        background-color: var(--dropdown-link-active-bg);
 
    }
     
    .navbar .dropdown-menu div > .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        z-index: 1000;
        top: -8px !important;
        left: 0px !important;
        margin-left: 214px;
    }

    .navbar .dropdown-menu div:hover > .dropdown-menu {
        opacity: 1;
        display: block;
        visibility: visible;
    }

</style>

Main.cshtml

@{
    async Task CreateDrilldownMenuAsync(IEnumerable<TreeNode<MenuItem>> nodes, bool isRoot)
    {
        if (isRoot)
        {
            @Html.Raw("<div class='dropdown-menu'>")
        }

        foreach (var node in nodes.Where(x => x.Value.Visible))
        {
            var item = node.Value;
            var itemUrl = item.GenerateUrl(this.ViewContext);
            var itemState = node.GetNodePathState(Model.Path);

            var attrs = item.GetCombinedAttributes().PrependCssClass("dropdown-item" + ((itemState & NodePathState.Selected) == NodePathState.Selected ? " selected" : ""));
            <div id="[email protected]" data-id="@item.Id" attr-class='(node.HasChildren, "dropdown-group")'>
                <a href="@itemUrl" attrs="@attrs">
                    <span sm-language-attributes-for="item">@item.Text</span>
                </a>
                @if (node.HasChildren)
                {
                    await CreateDrilldownMenuAsync(node.Children, node.HasChildren);
                }
            </div>

        }

        if (isRoot)
        {
            @Html.Raw("</div>")
        }
    }
}

[suatsuphi]

but when we add a submenu, the menu does not appear

[muratcakir]

Out-of-the-box, Smartstore only provides a 2-level menu in the front end. For more complex layouts, there is the MegaMenu plugin. In addition, the left-hand navigation bar on a category page displays the entire category tree.

[suatsuphi]

yes it works for categories but sometimes you may need it for pages. may be required for pages, even available in admin menus. Anyway, you used a precise language that it will not be done.

[suatsuphi]

https://github.com/smartstore/Smartstore/commit/f33f8407cc6232cec31f667698bb117da69aa925