Best jQuery Side Menu Plugins & Tutorials with Demo

    UberPanel – jQuery Sliding Panel Plugin for WordPress

    UberPanel - jQuery Sliding Panel Plugin for WordPress

    UberPanel is a plugin which adds a widgetised sliding panel to any WordPress theme. It provides you with an unobtrusive way to add additional space to your theme.

    Features:

    • Unobtrusively adds more space to your WordPress theme
    • Supports WordPress widgets (four horizontal columns and one vertical)
    • Choose from the left (off-canvas) panel or the top position
    • Choose colours for the button & border, or the optional pre-defined style
    • Works beautifully on all modern devices

    Animated Border Menus with CSS3 & JavaScript

    Animated Border Menus with CSS3 & JavaScript

    A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash’s bounce menu for mobile apps.The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind. So today I want to show you how to create something like that and provide some more inspirational examples.

    Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. Safari and Mobile Safari).

    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.