Foundation 响应式粘滞菜单 typo3 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

}

那我做错了什么？我只想拥有与 https://foundation.zurb.com/building-blocks/blocks/responsive-sticky-menu.html.

上的构建块完全相同的菜单

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

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>

这是我点击 "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

您的第二个级别未用 <ul class="menu vertical nested">|</ul> 包裹。我还不知道它是否能解决您的问题，但您应该这样写：

...

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

Foundation 响应式粘滞菜单 typo3 hmenu

foundation responsive sticky menu typo3 hmenu

templates

menu

typo3

zurb-foundation

fluid