scala - 在不同的 div 中创建 Lift 嵌套的子菜单

Question

我正在尝试构建嵌套菜单结构，但子菜单应该出现在页面上的不同元素中。

分组和隐藏子菜单将使它们始终出现，而不仅仅是在激活父菜单之后。

Menu.i("Startseite") / "index" >> Hidden >> LocGroup("servicenav"),
    Menu.i("Impressum") / "about"/"index" >> Hidden >> LocGroup("servicenav"),

    Menu.i("menu_1") / "100_menu1" submenus(
        Menu.i("menu_1a") / "100_menu1a" >> Hidden >> LocGroup("sidenavbar"),
        Menu.i("menu_1b") / "200_menu1b" >> Hidden >> LocGroup("sidenavbar"),
        Menu.i("menu_1c") / "300_menu1c" >> Hidden >> LocGroup("sidenavbar")
    ),

    Menu.i("menu_2") / "400_menu2" submenus(
        Menu.i("menu_2a") / "400_menu2a" >> Hidden >> LocGroup("sidenavbar"),
        Menu.i("menu_2b") / "500_menu2b" >> Hidden >> LocGroup("sidenavbar")
    )
)

和 html 部分：

<ul id="mainnav">
    <lift:Menu.builder li_item:class="open" li_path:class="open">
    Upper Navigation Panel for primary Menu
    </lift:Menu.builder>
 </ul>

---

<ul id="nav">
<lift:Menu.group group="sidenavbar" a:class="firstChild">
    Side-Navigation panel for submenus
<li><menu:bind /></li>
</lift:Menu.group>
</ul>

有人有好主意吗？

提前致谢

Answer 1

您没有在 HTML 的第一部分中指定“组”。也许这会有所帮助？

Answer 2

我第一次理解错了。

level能解决你的问题吗？

级别：要显示的整个选定菜单树的级别。对于顶层，计数从零开始。考虑一个包含“item1”、“item2”和“item3”的顶级菜单，假设“item1”有一个包含“item1a”和“item1b”的子菜单。0 级将显示顶层加上子菜单（见下一个选项）。如果选择了 item2 或 item3，则级别 1 将不显示任何内容，而如果选择了 item1 变体之一，则将显示 item1a 和 item1b 条目。

https://www.assembla.com/wiki/show/liftweb/SiteMap#using_sitemap_in_templates

Answer 3

好的，我通过将顶级菜单级别分组并让子菜单出现在主站点地图中创建了一个解决方法。有了这个，可以应用级别参数，因此只有活动的子菜单出现在 div 中。

Menu.i("Startseite") / "index" >> Hidden >> LocGroup("servicenav"),
Menu.i("Impressum") / "about"/"index" >> Hidden >> LocGroup("servicenav"),

Menu.i("menu_1") / "100_menu1" >> LocGroup("mainnavbar") submenus(
    Menu.i("menu_1a") / "100_menu1a",
    Menu.i("menu_1b") / "200_menu1b",
    Menu.i("menu_1c") / "300_menu1c"
),

Menu.i("menu_2") / "400_menu2" >> LocGroup("mainnavbar") submenus(
    Menu.i("menu_2a") / "400_menu2a",
    Menu.i("menu_2b") / "500_menu2b"
)

和 HTML：

<ul id="mainnav">
    <lift:Menu.group group="mainnavbar" level="1">
    <li><menu:bind />
    </li>
    </lift:Menu.group>
 </ul>

---

<div id="navblock">
    <ul id="nav">
    <lift:Menu.builder level="1" li_item:class="opfirstChildOpenen" li_path:class="firstChildOpen">
     Side-Navigation panel for submenus
    </lift:Menu.builder>
    </ul>
</div>

Answer 4

所以，终于有办法了。

我简单地添加了两个站点地图。第一个使用 level="0" 和 expand="false"，第二个使用 level="1"。但是，如果您单击第二个菜单，则第一个菜单将展开，而不管展开参数如何。所以我在样式表中设置了以下的宽度和高度

在第一个菜单中为 0。

不干净，但它的工作...

<ul id="mainnav">
    <lift:Menu.builder li_path:class="open" level="0" expand="false">

        Top Menu

    </lift:Menu.builder>
 </ul>

---

<ul id="nav">
    <lift:Menu.builder level="1" li_item:class="current" li_path:class="open">

        Side-menu

    </lift:Menu.builder>
</ul>

---

ul#mainnav li ul li{
height: 0;
width: 0;
}