Creating Lift nested Submenus in different div

Question

I'm trying to build a nested menu structure, but the submenus should appear in a different element on the page.

Grouping and hiding the submenus will make them appear always, not just after activating the parent menu.

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

And the html part:

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

Has anyone a good idea?

Thanks in advance

Answer 1

So, finally got a solution.

I simlpy added two Sitemaps. The first with with level="0" and expand="false", the second with level="1". However if you click in the second menu, the first will expand regardless of the expand parameter. So I set the in the stylesheet the width and heigth for the following

in the first menu to 0.

Not clean, but it works...

<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;
}

Answer 2

You didn't specify the "group" in the first part of the HTML. Maybe this would help ?

Answer 3

I understood you incorrectly the first time.

Would level solve your problem?

level: What level of the entire selected menu tree to show. Counting begins at zero, for the top level. Consider a top level menu with ‘item1’, ‘item2’, and ‘item3’ and supposed ‘item1’ has a submenu with items ‘item1a’ and ‘item1b’. Level 0 will show the top level plus the submenus (see next option). If item2 or item3 is selected level 1 will show nothing, while if one of the item1 variants is selected the item1a and item1b entries will be displayed.

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

Answer 4

Ok, I created a workaround by grouping the top-menu level and let the submenu appear in the main-sitemap. With this, the level-parameter can be applied and therefore only the active submenus appear in the 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"
)

And the 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>