Javascript Typo3中的响应式拆分菜单
我想在Typo3网站上添加一个拆分菜单，它也可以响应移动屏幕 到目前为止，我已经使用lib.mainMenu.special.value=x，y，z两侧（左侧和右侧）的两个独立菜单解决了这个问题。问题是如何在“响应移动”视口中将两个菜单合并为一个 所有页面在树中处于同一级别（但这不是必须的）Javascript Typo3中的响应式拆分菜单,javascript,css,menu,typo3,Javascript,Css,Menu,Typo3,我想在Typo3网站上添加一个拆分菜单，它也可以响应移动屏幕 到目前为止，我已经使用lib.mainMenu.special.value=x，y，z两侧（左侧和右侧）的两个独立菜单解决了这个问题。问题是如何在“响应移动”视口中将两个菜单合并为一个 所有页面在树中处于同一级别（但这不是必须的） 有什么想法、解决方案、脚本或教程吗 有几种方法可以提供帮助 最古老的（和过时的IMO）是。在那里，您可以使用布局对列进行（重新）排序 我刚刚在一个项目中使用的一个很好的方法是flexbox布局，在那里您可
有什么想法、解决方案、脚本或教程吗 有几种方法可以提供帮助
- 最古老的（和过时的IMO）是。在那里，您可以使用布局对列进行（重新）排序
- 我刚刚在一个项目中使用的一个很好的方法是flexbox布局，在那里您可以使用它，并几乎独立于HTML结构进行重构。解释的一个来源是
- 另一种可能是使用css网格布局，您也可以在网站上阅读
- 有了Javascript和DOM模型，你几乎可以做任何事情，你可以随心所欲地操作任何东西，如果你喜欢由JS确定的菜单，这只是一个问题，也就是说，对于可访问的方面，我通常会避免使用它，至少在你想达到的级别上
- 另一个选项是重新构造菜单，即在第一个菜单上添加第二个菜单，但使用断点显示或隐藏它（以及右侧边栏中的第二个菜单）
- 我的首选是创建菜单，根据设备只需更改显示，但不必隐藏或创建任何内容，只需根据断点更改样式即可
像bootstrap这样的框架已经使用javascript将菜单复制成隐藏菜单，以便在小屏幕上的“汉堡菜单”中显示 您也可以这样做：在complexest视图中呈现菜单，并使用javascript重建其他变体。
优点：html更小，服务器响应更快。
缺点：在客户端要做的工作，额外的JS 您还可以在TYPO3中构建所有版本并呈现它们，只有CSS决定以当前屏幕分辨率显示什么。
赞成：complexer或更多不同版本的不同标记更易于处理，在客户端没有DOM更改 缺点：渲染时间越长，HTML越大 这取决于设计的复杂性：
菜单是否在HTML中拆分？
每个条目的拆分版本和合并版本有多大差异？我已经解决了这个问题，方法是将我想要的菜单项隐藏在右侧，并用“hide0”或“hide1”将每个条目包装起来
NO.wrapItemAndSub=|
NO.wrapItemAndSub.insertData=1
doNotLinkIt.field=导航隐藏
JavaScript和CSS完成了其余的工作。现在，我可以在左侧菜单中显示非隐藏元素，在右侧菜单中显示隐藏元素，而响应菜单将显示所有元素。谢谢你的帮助。我现在要走JS路线。如何包装通过IncludeNotInMenu显示的菜单项？IncludeNotInMenu将包括标记为“不在菜单中”的页面，与普通页面一样。所以没有特别的包装。但是，如果您对该字段进行了评估并执行条件包（“代码> > OutTrase>代码> > />代码> .OutTrRAP.I.Tracue.Field= NavyLoe >），我会认为这是一个坏的解决方案，因为它滥用了用于其他任务的字段。一个干净的解决方案是引入一个自己的字段，并使用条件换行符对其求值。
NO.wrapItemAndSub = <li class="hide{field:nav_hide}">|</li>
NO.wrapItemAndSub.insertData = 1
doNotLinkIt.field = nav_hide