Note: Right click "View Page Source" (Ctrl-U) to copy the working code from this demo so that it is guaranteed to be accurate.
How can we have a reasonable menu for a website that will work well on small and large screens alike? It should have some way of expanding so that is stays out of the way when we're focusing on the current page. If you are unsure, just have a link back to the home page and all navigation can be there in sitemap form.
There's nothing quite like a vertically scrolling list. If you've ever had the pleasure to use the Application Finder in Xfce, you may share my disdain for various fly-out menus of the past or the grids of the future.
I recommend starting with alphabetical order. This will create a dictionary-like search paradigm until you feel the need to add filtering.
Sections of related menu items might be desired. Just please avoid reordering menu items. And consider that it is quite easy to use a single list. Categories actually slow down the user from getting to a specific item. Categories are for people who don't know what they want yet. You could have category pages instead of polluting the main menus.
Never slide the page around, as that would be disorienting. The menu could slide in from off the screen if you require animations. You may also fade the page if it distracts from the menu.
Theory is all well and good, but how do you get started? As always, we start with HTML, and add CSS for layout. This demo will not require JavaScript, and I recommend sticking with CSS to avoid pitfalls.
`details` and `summary` provide the basic collapsing feature desired. Only the summary will be displayed at first. Upon clicking a summary, the parent element will enter its open state, as if you'd written `details open`, and all contents will be shown.
These nested styles lay out a top menu button that opens a scrolling vertical list of links. You may set the width to `100%` if you like. Make sure to pad the right side of the `ul` or the `a` by at least 16px for the scrollbar.
CSS markers are limited to text, so we replace it with a more graphical `::before` pseudo-element that turns green when the menu is open. I've adjusted the padding-left to line up the text.