Foundation Menu for Typo3

Foundation6 Menu with drop down for Typo3 Template
<!-- Mobile navigation -->

  <div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

        <!-- Here should be the Typo3 <f:cObject typoscriptObjectPath="lib.nav_main" />  -->
        <ul class="vertical menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">Menes Maatwerk voor U!</a></li>
          <li><a href="#">Voorbeelden Keukens meubels</a></li>
          <li><a href="#">Contact met Menes</a></li>
          <li><a href="#">KeukenCheck</a></li>
          <li><a href="#">Shop MenesMooiste.nl</a></li>
        </ul>
      </div>

<!-- end Mobile Nav -->


<!-- Desktop Menu her should come the <f:cObject typoscriptObjectPath="lib.nav_main" /> -->
<div class="top-bar-container" data-sticky-container>
    <div class="sticky" data-sticky data-options="anchor: page; marginTop: 400; stickyOn: small;">
      <div class="top-bar">
        <div class="row column">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li class="menu-text">MyCompany</li>
              <li><a href="#">Home</a></li>
              <li class="has-submenu">
                <a href="#">Product - Samples </a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">One</a></li>
                  <li><a href="#">Two</a></li>
                  <li><a href="#">Three</a></li>
                </ul>
              </li>

              <li><a href="#">About Us</a></li>
              <li class="has-submenu">
                <a href="#">vier</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">One</a></li>
                  <li><a href="#">Two</a></li>
                  <li><a href="#">Three</a></li>
                </ul>
              </li>
            </ul>
          </div>

Typo Script code:

lib.nav_main = COA
lib.nav_main {
    10 = HMENU
    10 {
        wrap = <div class="top-bar-left">|</div>
        entryLevel = 0
        1 = TMENU
        1 {
            expAll = 1
            noBlur = 1
            wrap = <ul class="dropdown menu" data-dropdown-menu>|</ul>
            target = _top
            NO {
                stdWrap.htmlSpecialChars = 1
                wrapItemAndSub = <li has-submenu>|</li>
                #allWrap = <div class=" ">|</div>
            }
            ACT <.NO
			ACT{
			wrapItemAndSub = <li class="has-submenu">|</li>
		}

        }
        2 = TMENU
        2 {
            noBlur = 1
            wrap = <ul class="submenu menu vertical" data-submenu">|</ul>
            target = _top
            NO {
                stdWrap.htmlSpecialChars = 1
                wrapItemAndSub = <li class="has-submenu">|</li>
                #allWrap = <div class=" ">|</div>
            }
                }
		}