Menu example

This is an example of a side menu.

Try it out, show the menu by dragging to the right or clicking the menu button.

Details

This is implemented using a horizontal scroller outside of the main document scroller.

When you attempt to scroll beyond the horizontal limits of the document, it chains to the root scroller.

Snap points ensure that the side menu is either fully in view or fully hidden.

A scroll driven animation fades in the overlay which obscures the main content.

The content itself uses

position: sticky; right: 0;

such that it is always shifted into the viewport, even if that means sliding under the menu.

Fragment links are used to either scroll to the menu or scroll to the content area.