Typoscript append content in menu after sub-items

Question

I want to create a popup menu with content elements of the items.

The structure in the backend is basically as follows:

Menu1
   Submenu1.1
   Submenu1.2
   Submenu1.3
Menu2
   Submenu2.1
   Submenu2.2
   Submenu2.3

Where Menu1 and Menu2 have content elements on the page.

I managed to access the content elements, however, the elements are rendered BEFORE the sub menu items. I need them after that.

What I get:

<div class="headeroverlay">
    <div class="dropdown-overlay" id="overlay_4">
        
        <!-- CONTENT ELEMENTS -->
        <div class="contentimagesandtext">
            <div class="item"><!-- Content Element 1 of Menu 1 --></div>
            <div class="item"><!-- Content Element 2 of Menu 1 --></div>
        </div>

        
        <!-- SUB MENU -->
        <div class="subnav-block">
            <div class="subnav-link"><a href="/sub1.1">Submenu1.1</a></div>
            <div class="subnav-link"><a href="/sub1.2">Submenu1.2</a></div>
            <div class="subnav-link"><a href="/sub1.3">Submenu1.3</a></div>
        </div>
    </div>
    <div class="dropdown-overlay topdropdown" id="overlay_5">
        <!-- same for Menu 2 -->
    </div>
</div>

But I need content and submenu switched:

<div class="headeroverlay">
    <div class="dropdown-overlay" id="overlay_4">
        
        <!-- SUB MENU -->
        <div class="subnav-block">
            <div class="subnav-link"><a href="/sub1.1">Submenu1.1</a></div>
            <div class="subnav-link"><a href="/sub1.2">Submenu1.2</a></div>
            <div class="subnav-link"><a href="/sub1.3">Submenu1.3</a></div>
        </div>
        
        
        <!-- CONTENT ELEMENTS -->
        <div class="contentimagesandtext">
            <div class="item"><!-- Content Element 1 of Menu 1 --></div>
            <div class="item"><!-- Content Element 2 of Menu 1 --></div>
        </div>
        
    </div>
    <div class="dropdown-overlay topdropdown" id="overlay_5">
        <!-- same for Menu 2 -->
    </div>
</div>

Here's my script so far:

lib.menuOverlay = HMENU
lib.menuOverlay{
    1 = TMENU
    1.expAll = 1
    1.NO.doNotShowLink = 1
    1.NO.wrapItemAndSub = <div class="dropdown-overlay topdropdown" id="overlay_{field:uid}">|</div>
    1.NO.wrapItemAndSub.insertData = 1

    # Append Content Elements to stdWrap2
    1.NO.stdWrap2.append = CONTENT
    1.NO.stdWrap2.append {
        table = tt_content
        select {
            pidInList.stdWrap.data = field:uid
        }
        wrap = <div class="contentimagesandtext">|</div>
        renderObj.stdWrap.wrap = <div class="item">|</div>
    }

    2 = TMENU
    2.insertData = 1
    2.wrap = <div class="subnav-block">|</div>
    2.NO.wrapItemAndSub = <div class="subnav-link">|</div>

}

I tried adding the append to wrapItemAndSub. This will put the content elements after the submenus, but then I don't have a wrapper keeping them togehter.

Note that I need the Level-1 Page UID in the id tag of the wrapper

Question: How can I force the append to be AFTER the items, or alternatively, how can I add a wrapper around my wrapItemsAndSub, containing the parent UID?

Answer 1

Inspired by this answer, I managed to do what I need.

I append a COA to my first level menu, and put there the CONTENT and another HMENU with the sub-menu items, like this:

lib.menuOverlay = HMENU
lib.menuOverlay {
    1 = TMENU
    1.expAll = 1
    1.NO.doNotShowLink = 1
    1.NO.wrapItemAndSub = <div class="dropdown-overlay topdropdown" id="overlay_{field:uid}">|</div>
    1.NO.wrapItemAndSub.insertData = 1

    1.NO.stdWrap2.append = COA
    1.NO.stdWrap2.append {
        10 = HMENU
        10 {
            special = directory
            special.value.data = field:uid
            1 = TMENU
            1.insertData = 1
            1.wrap = <div class="subnav-block">|</div>
            1.NO.wrapItemAndSub = <div class="subnav-link">|</div>
        }
        20 = CONTENT
        20 {
            table = tt_content
            select {
                pidInList.stdWrap.data = field:uid
            }
            wrap = <div class="contentimagesandtext">|</div>
            renderObj.stdWrap.wrap = <div class="item">|</div>
        }
    }
}