基础响应粘性菜单错字3 hmenu

Question

我是Typo3，Fluid和Typoscript的新手，我希望有人可以帮助我......

我正在使用Typo3项目的响应式粘性菜单，可以在这里找到：

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

菜单的源代码是：

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

这是我的模板中包含菜单“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>

我想创建一个包含两个级别的菜单：这是一个子页面的页面示例结构。这是我的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

}

那我做错了什么？我只想拥有与qazxsw poi上的构建块完全相同的菜单。

这是我在Typo3中的页面结构：

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

非常感谢您的帮助！

这是我在前端的输出：

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

点击“关于我们”后，这是我的输出：

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

Answer 1

你的第二级不是用

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

包裹的。我不知道它是否正在解决你的问题，但你应该这样写：

<ul class="menu vertical nested">|</ul>