Index ¦ Archives ¦ RSS

jQuery Plugin - Box Lid Menu

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.

© James Lim. Built using Pelican. Theme by Giulio Fidente on github.