Responsive split menu in Typo3

Question

I want to add a split menu to a Typo3 site that shall also be responsive for mobile screens.

So far I have solved it with two separate menus using lib.mainMenu.special.value = x,y,z on both sides (left and right). The problem is how to merge the two menus to one in responsive mobile viewport.

All pages are at the same level in the tree (but this is not a must).

Any ideas, solutions, scripts or tutorials?

Answer 1

Depending on your framework you either have already some mechanism for changes of menu-display or you need to create your own.
Frameworks like bootstrap already use javascript to dublicate your menu into a hidden one for displaying it in the 'burger-menu' on small screens.

You can do the same: render the menu in the complexest view and rebuild other variants with javascript.
pro: smaller html, faster server-response.
con: work to do in the client, additional JS.

You also can build all versions in TYPO3 and render them and only CSS decides what to display in current screen resolution.
pro: complexer or more different markup for different versions are easier to handle, no DOM-changes at the client con: more rendering time, bigger HTML

it depends on the complexity of the design:
is the menu splitted inside the HTML? how much differ the splitted and joined version for each entry?

Answer 2

There are several approaches that could help

• The oldest (and outdated IMO) is yaml css . There you could use the layout to (re)sort columns.
• A nice approach I just used for a project is flexbox-layout, there you can resort, and restructure almost independent from HTML-structure. One source for explanations is css-tricks.com
• another possibility is using css grid layout, you can read about it on css-tricks.com too.
• with Javascript and the DOM-model you can do almost everything, you can manipulate whatever you want, it's just a matter if you like the menu determined by JS, ie for accessible-aspects I avoid it usually, at least on that level you like to reach.
• another option is to restructure the menu, ie adding already the 2nd menu to the first one, but using breakpoints to show it or hide it (and the 2nd menu in the right sidebar).
• my preference is to create the menu(s) that only display has to be change depending on the device, but nothing has to be hidden or created double, just the styling is changing based on breakpoints.

Answer 3

I have solved it by hiding the menu items I want on the right side and wrapped every item with either "hide0" or "hide1" with

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

JavaScript and CSS does the rest. Now I can display non-hidden elements in the left menu, hidden ones in the right menu and the responsive menu displays all. Thanks for the help.