foundation responsive sticky menu typo3 hmenu

Question

I am new to Typo3, Fluid and Typoscript and I hope someone can help me...

I am using a responsive sticky menu for a Typo3-project which can bei found here:

https://foundation.zurb.com/building-blocks/blocks/responsive-sticky-menu.html

The source code of the menu is:

<div data-sticky-container>
  <div data-sticky data-options="marginTop:0;">

    <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle="example-menu"></button>
      <div class="title-bar-title">Menu</div>
    </div>

    <div class="top-bar" id="example-menu">
      <ul class="vertical medium-horizontal dropdown menu" data-responsive-menu="accordion medium-dropdown">
        <li class="menu-text">Site Title</li>
        <li>
          <a href="#">One</a>
          <ul class="menu vertical nested">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </div>

  </div>
</div>

This is the source code of the part inside my template containing the fluid variable for the menu "menuPrimary":

<div data-sticky-container>
            <div data-sticky data-options="marginTop:0;">

                <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle="example-menu"></button>
                    <div class="title-bar-title">Menu</div>
                </div>

                <div class="top-bar" id="example-menu">
                    <ul class="vertical medium-horizontal dropdown menu" data-responsive-menu="accordion medium-dropdown">
                      <li class="menu-text">{labelSiteTitle -> f:format.raw()}</li>
                      {menuPrimary -> f:format.raw()}
                    </ul>
                </div>

            </div>
        </div>

I want to create a menu containing two levels: this is a sample structure of the pages an sub pages. This is my TypoScript:

10 = FLUIDTEMPLATE
10 {
file = fileadmin/templates/vorlage.html

variables {  

  labelSiteTitle = TEXT  
  labelSiteTitle.value = Testseite  

  menuPrimary = HMENU  
  menuPrimary {  
    special = directory  
    special.value = 3  

    1 = TMENU  
    1 {  
      NO = 1  
      NO {  
        wrapItemAndSub = <li>|</li>  
      }  

    }  

    2 = TMENU  
    2 {  
      NO = 1  
      NO {  
        wrapItemAndSub = <li>|</li>  
      }  
    }  

  }  

  contentMain < styles.content.get

}

So what am i doing wrong? I just want to have exactly the same menu like from the buidling block found on https://foundation.zurb.com/building-blocks/blocks/responsive-sticky-menu.html.

This is my page structure inside Typo3:

root
-main navigation
 |--Homepage
 |--News
 |--Private
 |--About Us
    |---Team
    |---blabla
    |---...

Thank you very much for your help!

This is my output in frontend:

<div data-sticky-container>
            <div data-sticky data-options="marginTop:0;">

                <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle="example-menu"></button>
                    <div class="title-bar-title">Menu</div>
                </div>

                <div class="top-bar" id="example-menu">
                    <ul class="vertical medium-horizontal dropdown menu" data-responsive-menu="accordion medium-dropdown">
                      <li class="menu-text">Testseite</li>
                      <li><a href="index.php?id=5">Homepage</a></li>
                      <li><a href="index.php?id=6">News</a></li>
                      <li><a href="index.php?id=7">Private</a></li>
                      <li><a href="index.php?id=8">About Us</a></li>
                    </ul>
                </div>

            </div>
        </div>

This is my output after clicking on "About Us":

<div data-sticky-container>
            <div data-sticky data-options="marginTop:0;">

                <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle="example-menu"></button>
                    <div class="title-bar-title">Menu</div>
                </div>

                <div class="top-bar" id="example-menu">
                    <ul class="vertical medium-horizontal dropdown menu" data-responsive-menu="accordion medium-dropdown">
                      <li class="menu-text">Testseite</li>
                      <li><a href="index.php?id=5">Homepage</a></li>
                      <li><a href="index.php?id=6">News</a></li>
                      <li><a href="index.php?id=7">Private</a></li>
                      <li><a href="index.php?id=8">About Us</a>
                          <li><a href="index.php?id=9">Team</a></li>
                          <li><a href="index.php?id=10">blabla</a></li>
                      </li>
                    </ul>
                </div>

            </div>
        </div>

Answer 1

Your second level is not wrapped with <ul class="menu vertical nested">|</ul>. I don't know yet if it's solving your issue but you should write it like this:

...

1 = TMENU  
1 {  
  expAll = 1
  NO = 1
  NO {
    wrapItemAndSub = <li>|</li>
  }
  IFSUB = 1
  IFSUB.wrapItemAndSub = <li class="is-dropdown-submenu-parent opens-right">|</li>
}
2 = TMENU  
2 {  
  wrap = <ul class="menu vertical nested">|</ul>
  NO = 1  
  NO {  
    wrapItemAndSub = <li>|</li>  
  }  
}  
....