Typo3中的響應式拆分菜單

Question

我想向Typo3網站添加一個拆分菜單，該菜單也應對移動屏幕有所響應。

到目前為止，我已經通過在兩側（左側和右側）使用lib.mainMenu.special.value = x，y，z的兩個單獨的菜單解決了該問題。 問題是如何在響應式移動視口中將兩個菜單合並為一個。

所有頁面都在樹中處於同一級別（但這不是必須的）。

有任何想法，解決方案，腳本或教程嗎？

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完成。 現在，我可以在左側菜單中顯示非隱藏元素，在右側菜單中顯示隱藏的元素，而響應菜單顯示所有內容。 謝謝您的幫助。