Back to Motion Prompt examples
UI component names · #17
Hamburger menu
A three-line icon that opens the menu. Clicking the three-line icon at the header's right turns it into ×, and a menu drops down from under the header; clicking again closes it.
Navigation & statushamburger-menuhamburgermenu-iconnav-togglemobile-menumenu
Full motion specification
How the movement works
Use it on narrow screens to tuck the main navigation behind one button.
- 014.5 s cycle on a 542×191 card. A white 44-tall header; three lines (24 long, 3 thick, 8 px apart) at (500, 22) on the right.
- 02The cursor clicks at 1.0 s and 3.3 s. Open amount a: 0→1 over 1.0–1.3 s, 1→0 over 3.3–3.6 s, easeInOutCubic.
- 03Lines to ×: the top and bottom lines move 8 px to the centre and rotate ±45°; the middle line fades with opacity 1 − a. Blue while open.
- 04Menu: white, 140 tall, top at y = 44 − 140 + 140·a so it drops from under the header (clipped below the header), shadow blur 16, four items, the first blue.
Prompt
Put a hamburger menu at the right of the mobile header: on tap, morph the three lines into × in 0.3 s and drop the menu down from the top.