我想向 Typo3 网站添加一个拆分菜单，该菜单也应响应移动屏幕。
到目前为止，我已经使用两侧(左侧和右侧(的lib.mainMenu.special.value = x，y，z的两个单独的菜单解决了它。问题是如何在响应式移动视口中将两个菜单合并为一个。
所有页面在树中都处于同一级别(但这不是必须的(。
任何想法、解决方案、脚本或教程？
根据您的框架，您要么已经有一些更改菜单显示的机制，要么需要创建自己的机制。
像bootstrap这样的框架已经使用javascript将你的菜单配音成一个隐藏的菜单，以便在小屏幕上的"汉堡菜单"中显示它。
你也可以这样做：在最复杂的视图中渲染菜单，并使用javascript重建其他变体。
优点：更小的html，更快的服务器响应。
缺点：在客户端中要做的工作，额外的JS。
您还可以在 TYPO3 中构建所有版本并渲染它们，只有 CSS 决定以当前屏幕分辨率显示的内容。
优点：不同版本的复杂或更多不同标记更容易处理，客户端没有DOM更改 缺点：更多的渲染时间，更大的HTML
这取决于设计的复杂性：
菜单是否在HTML中拆分？ 每个条目的拆分和连接版本有多大差异？
有几种方法可以提供帮助
- 最古老(和过时的IMO(是yaml css。在那里，您可以使用布局对列进行(重新(排序。
- 我刚刚用于项目的一个很好的方法是flexbox布局，在那里你可以求助，并几乎独立于HTML结构进行重组。解释的一个来源是 css-tricks.com
- 另一种可能性是使用CSS网格布局，您也可以在 css-tricks.com 上阅读它。
- 使用 Javascript 和 DOM 模型，您几乎可以做任何事情，您可以操作任何您想要的操作，如果您喜欢 JS 确定的菜单，这只是一个问题，即对于可访问的方面，我通常避免它，至少在你喜欢达到的那个级别上。
- 另一种选择是重组菜单，即将第二个菜单添加到第一个菜单，但使用断点显示或隐藏它(以及右侧栏中的第二个菜单(。
- 我的偏好是创建仅显示的菜单，该菜单必须根据设备进行更改，但无需隐藏或创建双重内容，只是样式会根据断点进行更改。
我已经通过将我想要的菜单项隐藏在右侧并用"hide0"或"hide1"包装每个项目来解决它
NO.wrapItemAndSub = <li class="hide{field:nav_hide}">|</li>
NO.wrapItemAndSub.insertData = 1
doNotLinkIt.field = nav_hide
JavaScript和CSS完成了剩下的工作。现在我可以在左侧菜单中显示非隐藏元素，在右侧菜单中显示隐藏元素，响应式菜单显示全部。感谢您的帮助。