[csswg-drafts] [css-flexbox][css-regions] Navigation links overflowing into a menu (#4519)

JoshTumath has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox][css-regions] Navigation links overflowing into a menu ==
I've been working on a more modernised version of the BBC's website navigation bar. The original one pre-dates flexbox being widely supported by browsers, so it was never implemented using that.

## Problem

The BBC navigation bar has all it's links in the 'menu drawer', which opens up when the user clicks the Menu button. To save users on large viewports from having to open the menu drawer, on load, a relatively complex script calculates how many links could fit inside the navigation bar, and moves them out of the `ul` element for the menu drawer, into the `ul` element for the navigation bar. If the user resizes the viewport, this is recalculated. See the image:

<img width="1287" alt="Screenshot of the BBC website's navigation bar with the menu draw open." src="https://user-images.githubusercontent.com/1760227/69169460-4be5c680-0af0-11ea-81f6-3c5e31e1b684.png">

Because this is done using a script, there's a few problems:

* If JS is disabled or fails to execute, no links can be moved to the navigation bar (see image below).
* While the script works out how many links can fit inside the navigation bar, the user will see a flash where the navigation bar is mostly empty.
* The user experience is strange for screen reader users, because there's two lists to navigate.

<img width="1286" alt="Screenshot of the BBC website's navigation bar on a page with JavaScript disabled." src="https://user-images.githubusercontent.com/1760227/69169561-79327480-0af0-11ea-8edd-3e62a66ee4a5.png">

## What I would like to be able to do

I want to re-implement this menu so that no script is required to fit as many links as possible in the navigation bar and put the rest in the menu drawer (you'd probably still need a script for the menu toggle button). There would be only one `ul` list in the DOM -- the menu items would not get divided up between two lists in the navigation bar and the menu drawer.

[The CSS Regions spec has an example for a very similar use case to this.](https://drafts.csswg.org/css-regions-1/#introduction)

So I'd like to use flexbox to lay out the navigation links in the navigation bar. Then I'd use CSS Regions to have the navigation flow into the menu drawer. But, if the navigation links are in the menu drawer, I want them to be styled differently; laid out using CSS grids and having different hover and focus styles.

---

I was encouraged by @argyleink to post this use case after meeting him at the Mozilla View Source conference (thanks, Adam 😄).


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4519 using your GitHub account

Received on Tuesday, 19 November 2019 18:03:08 UTC