Mega menu

Full motion specification

How the movement works

Use it on sites with many products or sections so visitors can see the whole range at once.

1. 014.5 s cycle on a 542×191 card. A 42-tall header with "Products, Pricing, Support" (in Japanese, 16 px, each with a down chevron).
2. 02The cursor only hovers: it reaches "Products" at 1.0 s. Open amount a: 0→1 over 1.05–1.3 s with easeOutCubic; "Products" turns blue with an underline.
3. 03Panel: white, full width, 146 tall, dropping 12 px into place under the header while fading in with a. Shadow blur 18, offset y 8.
4. 04Inside: three columns 130 px apart (a blue heading and three links each) and a 104×112 picture at the right. The cursor moves down and the second link of the second column is highlighted light blue from 1.75 to 2.9 s.
5. 05Close: the cursor leaves the panel from 2.9 s; it fades over 3.15–3.4 s (1 − easeInOutCubic).