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.
That is a really good suggestion, and having just looked at the way Apple do it, I agree, that could be the best option. Thanks!
Looking at the Apple navigation is interesting. Is there a way to emulate their secondary navigation bars, where the user swipes across the options with their finger, when on a mobile device?
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
That’s great, those suggestions from you both, Walter, and Jeremy, help enormously. I feel I can really improve my site with this.
One last question. Do you know if there is a way to change the style of the scrollbar for the particular HTML box in question? To make the scrollbar much thinner and perhaps change its colour?
That is, without changing the scroll bar style for the web page itself?
Good point, thanks, important that the robots can read it.
So I figured a simple hack to make the scrollbar smaller, or disappear, but still being able to scroll with a finger swipe - just plonked a white html box over where it would be.
That’s just for aesthetics - regular, old fashioned scroll bars don’t seem to be used much on modern sites.
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.