基礎響應式粘性菜單typo3 hmenu

Question

我是Typo3，Fluid和Typoscript的新手，希望有人能幫助我...

我正在為Typo3-項目使用響應式粘滯菜單，可以在這里找到：

https://foundation.zurb.com/building-blocks/blocks/response-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”的fluid變量：

<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 =流體模板
10 {
文件= 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/response-sticky-menu.html上的buidling塊完全相同的菜單。

這是我在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>

這是單擊“關於我們”后的輸出：

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