如何在导航提供程序中对齐菜单?

Question

美好的一天。

我正在使用 MVC 核心 ASP.NET 样板 v0.9.6。

我正在尝试将侧边菜单对齐，如下所示：

• 项目1
• 项目2
  • 项目2.1
    • 项目 2.1.1
• 项目3

这是当前代码显示菜单的方式：

• 项目1
• 项目2
  • 项目2.1
  • 项目 2.1.1
• 项目3

这是代码：

// Menu for CRM Module
.AddItem(
new MenuItemDefinition(
"CRMModule",
L("CRMModule"),
url: "CRMModule",
icon: "fa fa-wrench",
requiredPermissionName: PermissionNames.Pages_SparesRequirements
).AddItem(
new MenuItemDefinition(
"Companies",
L("Companies"),
url: "Company",
icon: "fa fa-building",
requiredPermissionName: PermissionNames.Pages_Companies
)
).AddItem(
new MenuItemDefinition(
"Quotations",
L("Quotations"),
url: "Quotation",
icon: "fa fa-list-alt",
requiredPermissionName: PermissionNames.Pages_Quotations
).AddItem(
new MenuItemDefinition(
"Quotations",
L("List"),
url: "Quotation",
icon: "fa fa-table",
requiredPermissionName: PermissionNames.Pages_Quotations
)
).AddItem(
new MenuItemDefinition(
"Quotations",
L("Create"),
url: "Quotation/CreateQuote",
icon: "fa fa-plus",
requiredPermissionName: PermissionNames.Pages_Quotations
)
)
).AddItem(
new MenuItemDefinition(
"Leads",
L("Leads"),
url: "Lead",
icon: "fa fa-building-o",
requiredPermissionName: PermissionNames.Pages_Leads
)
)
)

Answer 1

我想这就是你想要的：

• CRMModule
  • 公司
  • 报价
    • 列表
      • 创造
  • 导致

首先，每个MenuItemDefinition都应该有一个唯一的Name(第一个参数(。

其次，很明显，当您使用适当的缩进时，您需要做什么。

之前：

).AddItem(
new MenuItemDefinition(
"Quotations", // "List"
L("List"),
url: "Quotation",
icon: "fa fa-table",
requiredPermissionName: PermissionNames.Pages_Quotations
) // Remove
).AddItem(
new MenuItemDefinition(
"Quotations", // "Create"
L("Create"),
url: "Quotation/CreateQuote",
icon: "fa fa-plus",
requiredPermissionName: PermissionNames.Pages_Quotations
)
)

之后：

).AddItem(
new MenuItemDefinition(
"List",
L("List"),
url: "Quotation",
icon: "fa fa-table",
requiredPermissionName: PermissionNames.Pages_Quotations
).AddItem(                                                       // Indented
new MenuItemDefinition(                                      // Indented
"Create",                                                // Indented
L("Create"),                                             // Indented
url: "Quotation/CreateQuote",                            // Indented
icon: "fa fa-plus",                                      // Indented
requiredPermissionName: PermissionNames.Pages_Quotations // Indented
) // Added
)
)

---

SideBarNav/Default.cshtml

若要支持 3 级菜单项，请更改以下行：

<a href="@calculateMenuUrl(subSubMenuItem.Url)">
@subSubMenuItem.DisplayName
</a>

自：

@if (subSubMenuItem.Items.IsNullOrEmpty())
{
<a href="@calculateMenuUrl(subSubMenuItem.Url)">
@if (!string.IsNullOrWhiteSpace(subSubMenuItem.Icon))
{
<i class="material-icons">@subSubMenuItem.Icon</i>
}
<span>@subSubMenuItem.DisplayName</span>
</a>
}
else
{
<a href="javascript:void(0);" class="menu-toggle">
@if (!string.IsNullOrWhiteSpace(subSubMenuItem.Icon))
{
<i class="material-icons">@subSubMenuItem.Icon</i>
}
<span>@subSubMenuItem.DisplayName</span>
</a>
<ul class="ml-menu">
@foreach (var subsubSubMenuItem in subSubMenuItem.Items)
{
<li class="@(Model.ActiveMenuItemName == subsubSubMenuItem.Name ? "active" : "")">
<a href="@calculateMenuUrl(subsubSubMenuItem.Url)">
@subsubSubMenuItem.DisplayName
</a>
</li>
}
</ul>
}

Answer 2

看起来Create子菜单是您要降低一个级别的菜单，因此它将在List项下定义：

new MenuItemDefinition(
"List", // so it will be defined under "List"
L("Create"),
url: "Quotation/CreateQuote",
icon: "fa fa-plus",
requiredPermissionName: PermissionNames.Pages_Quotations
)