Best jQuery Side Menu Plugins & Tutorials with Demo

Transitions for Off-Canvas Navigations with CSS3 & JavaScript

Transitions for Off-Canvas Navigations with CSS3 & JavaScript

Today we’d like to share another set of transition effects with you. This time we’ll explore transitions for sidebars or off-canvas content like the one we’ve used in the Multi-Level Push Menu. The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the sidebar slides in, pushing the other content to the side. But there are many more possibilities for subtle and fancy effects and today we want to give you some inspiration.

Multi-Level Push Menu in JavaScript

Multi-Level Push Menu in JavaScript

Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). The result is a “push” menu that can (theoretically) contain infinite nested sub-menus. When opening a sub-level, the whole navigation pushes the content more, allowing a slice of the parent menu to be visible. Optionally, this slice can be visible or not, in which case the sub-menu will simply cover its parent.

offCanvasMenu : jQuery Responsive off-canvas toggling Menu

offCanvasMenu : jQuery Responsive off-canvas toggling Menu

offCanvasMenu is a jQuery/Zepto plugin that provides an easy way to implement an off-canvas toggling menu, a navigation metaphor made popular by mobile applications.

When activated, offCanvasMenu “slides” the menu element into view, “pushing” other content to the side.

Off-Canvas Navigation for Responsive websites with jQuery & CSS3

Off-Canvas Navigation for Responsive websites with jQuery & CSS3

In this article, I’ll be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that I believe are at the heart of the Web’s future.