Deluxe is a lightweight plugin for jQuery/Zepto designed to mimic the speed and usability of off-canvas navigation schemes found in popular mobile apps like Facebook and Path. Its small size and compatibility with the mobile-friendly framework, Zepto, make it ideal for responsive websites. Silky-smooth touch-based interactions (see demo video) enhance the experience on touch-enabled devices. And implementation is quick and easy—the plugin will generate the HTML structure and CSS it needs leaving only the visual styling to you.
Demos and more documentation to come. In the meantime, see it implemented in the mobile and tablet layouts at Bust Out Solutions.
- jQuery — Any relatively recent version should be sufficient.
- Zepto — Version 1.0+ is required. As of 3/28/2013, to obtain 1.0+ you must build it from the source. (The copy available directly on zeptojs.com is 1.0rc1 which doesn't qualify.) A pre-compiled copy of 1.0 is available in the
libfolder for your coding convenience.
Target your desired navigation element, for example:
$('#header nav').deluxe()
For all available options, see src/deluxe.js.
Eric Grossnickle is an interface designer and developer at Bust Out Solutions.