基金会响应式粘性菜单错别字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>

我想创建一个包含两个级别的菜单：这是子页面的示例结构。这是我的错别字脚本：

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

这是我点击"关于我们"后的输出：

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