Would it be possible to add responsive support, by moving menu items under a burger icon in the right hand side, like for example Bootstrap does, under smaller resolutions? Examples:
Minimize a page with Firefox's Responsive Design Tool (Shift+Ctrl+M) to 400 x 900 px and see the menu items are shown as under Desktop view.
Hide the menu items under a burger icon in the right hand side under smaller resolutions, like for example Bootstrap does.
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | disclosure-mobile-navigation-peek.gif | 247.37 KB | ressa |
| #6 | disclosure-mobile-navigation.css_.txt | 2.47 KB | ressa |
| #6 | block--disclosure-mobile-navigation.html_.twig_.txt | 2.92 KB | ressa |
| #2 | full menu disclosure option.png | 41.87 KB | jayhuskins |
Comments
Comment #2
jayhuskinsThis functionality is not automated, but it is possible with a little extra work. There is an option to add a button to toggle open the entire menu:
This will give you the functionality of a menu that is hidden by default and opened with a button. To get the seamless effect requested you will also need to:
To achieve all of this within a single block would require a submodule that depends on the core Breakpoints module. I have not prioritized this work because "mobile menus" often contains different content than the default menu.
Comment #3
ressaAh yes, that makes sense. And I do agree that having two different block instances is a perfectly viable solution, since you might want "expand on hover" in Desktop view, but not in Mobile view, and other different configurations for different resolutions.
Would you happen to have a CSS snippet, which hides the expanded menu block until a desired breakpoint, and hides the collapsed menu block at that breakpoint? If we reach something workable here, perhaps it can go into the README? I would think many users would find it useful.
Comment #4
ressaComment #5
ressaI almost got a rough sketch for responsive menu ready, I'll try to share it here tomorrow.
Comment #6
ressaI found Create a Modern CSS-only Fold-Out Burger Menu and used that as a base for a rough sketch.
Here are the steps, where I used the Claro theme to test:
Create menus, with children
drush devel-generate:menusAdd 2 blocks from the same menu
Disable "Display title" in both.
Desktop block
disclosure_desktop_navigationMobile block
disclosure_mobile_navigationTwig template
Name:
block--disclosure-mobile-navigation.html.twigCSS
I adjusted some bits of the original CSS, and added some simple CSS at the bottom to make the Desktop block items resemble a menu, some list item style, and media rule.
Or maybe just some copy parts from Olivero?
While looking at this, I also saw that Olivero has a great mobile solution, so perhaps it's worth considering re-using parts of that instead? Or could this simple solution work?
Comment #7
ressaComment #8
ressaWouldn't it be great to add responsive support? I hope you have time to review this at some point ...
Comment #9
jayhuskinsThis a great use-case for this module! Let's move the discussion for default styling options to this ticket [#3401517]. The twig override could also be better implemented once there is a separate sub-template for the toggle button per this ticket [#3391087].
Comment #10
ressaGreat, looking at style in that issue makes sense.
But since the responsive menu relies on #3391087: Break-up menu template into sub-templates, and there are components in this issue which may be useful, perhaps instead make it a child issue?
Comment #11
lostcarpark commented+1 for this. I think Olivero missed an opportunity to make it's menu system a separate module so it could plug in to any theme. I'm hoping Disclosure menu can fill that gap.
Comment #12
sonfdI like this idea a lot.
One thing that I think we want to consider is that not all sites have just 2 menus (one for desktop, one for mobile). It may be that they have 3 (mobile, tablet, desktop) or it may be that they have either of those scenarios, but different groups of menus for multiple different sections of a site.
I wonder if there's a way to use a Block visibility condition to achieve the multiple blocks showing / hiding, maybe the Block Breakpoint module would work.
And definitely, to @ressa's point, I love the idea of documenting how to achieve this somewhere in the module – probably the README.md – or maybe a recipe to do it too.
Comment #13
sonfdI have been thinking about this more and I'm convinced the solution is a recipe. The recipe can:
We can then link to the recipe from the project page.
Leaving this postponed for now. In the meantime, this thread can serve as the documentation.
Comment #14
ressaGreat suggestion @sonfd! I saw today that a doc page for the Disclosure Menu module exists, so based on bits and pieces from this page, I have created How to create a responsive menu.
Feel free to give it a look over, and correct mistakes, clarify where needed, etc. Thanks!