Using the CSS Menus tool, I have a regular menu that spans across the page in fullscreen, with submenus that pull down automatically when hovered over. When the screen hits a breakpoint, it becomes a hamburger menu. All good.
What I am struggling with is the fact that on a mobile phone, all the submenus are being automatically shown, so the initial menu the viewer sees is incredibly long.
I would like the submenus to only appear, when their respective headers are clicked. Just like they only appear on desktop, when the headers are hovered over. And likewise, if a different submenu header is clicked, that previous open menu collapses, and the new one opens up.
If that makes sense?
This is a really common feature around the web, so I am sure it is easy to do, it’s just I can’t seem to find a way of doing it. And can’t see any previous discussions on the subject.
I think what you’re asking for is known as an accordion.
Personally, I find submenus a bit overwhelming on the Web. They work well in Mac applications, because users are willing to invest time in becoming familiar with an application, but I don’t find them helpful as a casual website visitor.
As an alternative, you could look at how Apple provide navigation on their website: there is a top-level menu which provides navigation to different areas (Store, Mac, iPad, iPhone etc.) and then there are secondary navigation bars for each area. I find this easier to navigate than having to search through submenus.
If you make a nested construction, and apply overflow-x: auto to the outer container, then the inner contents will scroll horizontally if needed by the viewport size. Be sure to allow for enough bottom padding on the outer container to ensure that the automatic scroll bar doesn’t obscure any of your navigation options.
There certainly is a way, but it’s not something I’ve really looked into.
One way to do something like this would be to create a flex layout. This involves a flex container, which is an HTML box whose display property is set to flex (you can use extended style properties to do this in Freeway). Within this container there would be flex items (HTML boxes) containing links. You would then set overflow on the flex container to be auto, so that it scrolls when there is not enough space.
Another way, that doesn’t involve using flex layout, would be to use a normal text navigation bar (“Link1 Link2 Link3” etc.) within an HTML box, but separate each link with non-breaking spaces so they can’t wrap. Once again, set overflow on the container to be auto
It is very rare to find a default browser that shows them all the time. overflow: auto respects this preference. There are deeper, more invasive css structures you can use to force a scroll bar to appear regardless of user setting/lack thereof. But since you don’t want that, this should do the trick.