Flowing Menu

A vertical menu whose rows open from the edge your pointer arrived at, revealing a scrolling ribbon of the label.

About this tool

A menu that behaves like it is being pushed around rather than switched on. Point at a row and a panel slides in from the edge you came from; leave downward and it retreats downward. Inside the panel a ribbon scrolls the row's own label alternating with a plate, and it holds still in space while the panel sweeps across it -- the two layers counter-translate by the same amount, which is the whole trick and the reason it does not read as an ordinary slide-in. The ribbon is CSS: two identical halves of a track animated to exactly minus one half its width, so the loop closes on itself with nothing measured, nothing timed and no dependency, and a window resize does not restart it. Hover, keyboard focus and touch press-and-hold all reach the same state, and the standalone export still reveals with its script deleted. Row count, copies, cycle time and direction are controls; so are the five colours behind the white-on-ink inversion, the type, and the plate geometry. Reduced motion stops the ribbon, not just the transitions. Edit it, then export one self-contained HTML file with no runtime dependencies.

In collections: Navigation Components: Tabs, Steppers & Menus CSS Hover Effects & Animations

Guide: Feature Sections That Explain a Product: Grid, Tabs or Walkthrough? Text on Hover: Readable Tooltips and Hover Text Effects

UI/UX · HTML / CSS All tools

Assets

Rows

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Rows

Menu width px

Menu height px

Panel

Scroll

Cycle s

Direction

left right

Copies

Ribbon size px

Palette

Label

Panel

Ribbon

Rules

Type

Label size px

Weight

Tracking px

Case

none uppercase

Motion

Reveal ms

Stage

Stage colour

#ffffff