Smashing Magazine wrote a piece about Toybox's navigation menu today, describing the user experience as "peeking behind the page or the lid of a toybox". I really liked the design, took a shot at creating a jQuery plugin to replicate the effect. Here is a demo.
Most of the work is done in CSS3, and Javascript is only used to toggle the menu. When a user hovers her mouse over the menu bar, a script adds the .box-lid-open
class to the root element which triggers the CSS3 transitions.
The skewing effect is achieved with perspective
, perspective-origin
, and a rotateY
transformation. Credit goes to BBY.