Typo3中的响应式拆分菜单

Question

我想在Typo3网站上添加一个拆分菜单，该菜单也应能对移动屏幕进行响应。

到目前为止，我已经使用lib.mainMenu.special.value =两侧（左侧和右侧）的两个单独菜单解决了此问题。问题是如何在响应式移动视口中将两个菜单合并为一个。

所有页面在树中处于同一级别（但这不是必须的）。

有任何想法，解决方案，脚本或教程吗？

Answer 1

根据您的框架，您已经具有某种菜单更改显示机制，或者需要创建自己的菜单。
引导程序之类的框架已经使用javascript将您的菜单复制为一个隐藏的菜单，以便在小屏幕上的“汉堡菜单”中显示该菜单。

您可以执行以下操作：在最复杂的视图中呈现菜单，并使用javascript重建其他变体。
专业版：较小的html，更快的服务器响应。
缺点：在客户端要做的工作，需要额外的JS。

您还可以在TYPO3中构建所有版本并进行渲染，只有CSS决定在当前屏幕分辨率下显示的内容。
优点：不同版本的标记更复杂或更不同，更易于处理，客户端没有DOM更改 缺点：渲染时间更长，HTML更大

这取决于设计的复杂性：
菜单在HTML内拆分了吗？ 每个条目的拆分和合并版本有何不同？

Answer 2

有几种方法可以帮助

• 最古老（且已过时的IMO）是yaml css。在那里，您可以使用布局对列进行（重新）排序。
• 我刚在项目中使用的一种不错的方法是flexbox-layout，您可以在其中进行选择，并进行重组，使其几乎独立于HTML结构。一种解释来源是css-tricks.com
• 另一种可能是使用CSS网格布局，您也可以在css-tricks.com上阅读它。
• 使用Javascript和DOM模型，您几乎可以完成所有事情，可以操作任何所需的东西，这只是问题，如果您喜欢JS确定的菜单，即对于可访问方面，我通常会避免这样做，至少在那方面您想要达到的水平。
• 另一种选择是重组菜单，即已经在第一个菜单中添加了第二个菜单，但是使用断点来显示或隐藏它（以及右侧菜单中的第二个菜单）。
• 我的喜好是创建一个菜单，仅需根据设备更改显示内容，而不必隐藏或创建任何菜单，只需根据断点更改样式即可。

Answer 3

我已经解决了它，方法是将我想要的菜单项隐藏在右侧，并用“ hide0”或“ hide1”包裹每个项目，

NO.wrapItemAndSub = <li class="hide{field:nav_hide}">|</li>
NO.wrapItemAndSub.insertData = 1
doNotLinkIt.field = nav_hide

JavaScript和CSS完成其余的工作。现在，我可以在左侧菜单中显示非隐藏元素，在右侧菜单中显示隐藏的元素，而响应菜单显示所有内容。感谢您的帮助。