时间戳

首页 > 解决方案 > Typo3 中的响应式拆分菜单

javascript - Typo3 中的响应式拆分菜单

问题描述

我想向 Typo3 站点添加一个拆分菜单，该站点也应响应移动屏幕。

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

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

有什么想法、解决方案、脚本或教程吗？

标签： javascriptcssmenutypo3

解决方案

根据您的框架，您要么已经有一些更改菜单显示的机制，要么您需要创建自己的。
像 bootstrap 这样的框架已经使用 javascript 将您的菜单复制到一个隐藏的菜单中，以便在小屏幕上的“汉堡菜单”中显示它。

您也可以这样做：在最复杂的视图中呈现菜单并使用 javascript 重建其他变体。
pro：更小的 html，更快的服务器响应。
con：在客户端做的工作，额外的JS。

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

这取决于设计的复杂性：
菜单是否在 HTML 中拆分？每个条目的拆分和合并版本有多少不同？

推荐阅读