Combine two menu's in Typoscript

Question

I would like to combine two menu's into one for mobile. So with the foundation top-bar the standaard menu is shown and the below the tip menu into one menu. But i don't get the tip menu wrapped into the main menu just before the first . See code below, any idee?

  topnavigation = HMENU
  topnavigation.wrap (

  <section class="topnavigation">
  <div class="row">
  <div class="columns large-12">
  <nav class="top-bar" data-topbar data-options="back_text: &laquo; Vorige">
  <ul class="title-area">
  <li class="name">
  <h1><a href="#"></a></h1>
  </li>
  <li class="toggle-catmenu show-for-small menu-icon"><a href="#">Tips</a></li>
  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
  <ul class="right">|<li class="divider"></li></ul>
  </section>
  </nav>
  </div>
  </div>
  </section>

  )
  topnavigation.entryLevel = 0
  topnavigation {
    1= TMENU
    1 {
      expAll = 1
      maxItems = 4
      NO.wrapItemAndSub = <li class="top-but">|</li>

      ACT = 1
      ACT.wrapItemAndSub =  <li class="active top-but">|</li>            

      IFSUB = 1
      IFSUB.wrapItemAndSub = <li class="has-dropdown top-but">|</li>

      ACTIFSUB = 1
      ACTIFSUB.wrapItemAndSub= <li class="active has-dropdown top-but">|</li>

    }    
    2= TMENU
    2 {
      wrap = <ul class="dropdown">|</ul>
      NO.wrapItemAndSub = <li>|</li>

      ACT = 1
      ACT.wrapItemAndSub =  <li class="active">|</li>

    }    
  }

      tipmenu = HMENU
      tipmenu.special = directory
      tipmenu.special.value = 8
      tipmenu.allWrap = <ul class="left">|</ul>
      tipmenu {
        1 = TMENU
        1 {
          expAll = 1
          maxItems = 4
          NO.wrapItemAndSub = <li class="top-but">|</li>

          ACT = 1
          ACT.wrapItemAndSub =  <li class="active top-but">|</li>            

          IFSUB = 1
          IFSUB.wrapItemAndSub = <li class="has-dropdown top-but">|</li>

          ACTIFSUB = 1
          ACTIFSUB.wrapItemAndSub= <li class="active has-dropdown top-but">|</li>

        }    
        2= TMENU
        2 {
          wrap = <ul class="dropdown">|</ul>
          NO.wrapItemAndSub = <li>|</li>

          ACT = 1
          ACT.wrapItemAndSub =  <li class="active">|</li>
        }
     }

Answer 1

You can't combine one HMENU inside the other instead you need to use COA cObject , COA allows for combining many cObjects (even different type):

myCombinedMenu = COA
myCombinedMenu.10 < lib.mainMenu
myCombinedMenu.20 < lib.additionalMenu
myCombinedMenu.30 = TEXT
myCombinedMenu.30.value = ...and that's it...

Answer 2

This should do it. COA is not necessary. This solution has a common parent ul tag and displays both sub tree items (the items of two different sub-trees) at the same ul level:

temp.mainMenuObject = HMENU
temp.mainMenuObject {
  # entryLevel = 1
  special = directory
  special.value = pid1, pid2 # pids of parent pages
  1 = TMENU
  1 {
    expAll = 1
    wrap = <ul> | </ul>
    NO = 1
    NO {
      wrapItemAndSub = <li>|</li>
      ATagTitle.field = title
    }
  }
  2 < .1
}