Morphing menu
Navigationmade for SOLENNE ↗
A navigation menu whose panel changes shape to fit what it holds. Moving from one item to the next resizes and slides a single panel instead of closing one menu and opening another, so the eye follows one object along the bar. Content arrives from the side the pointer is travelling towards.
How it behaves
- Hover opens it with a mouse; a tap toggles it on a phone.
- Tab walks through it from the keyboard and Esc closes it.
- A clear bridge under the bar keeps it open on the way down to the panel.
How it is made
- React and CSS transitions, with no animation library.
- Every pane is measured before it is shown, so the panel moves between real sizes.
- Size, position and the underline share one easing curve.