The Famous Slide Out Sidebar Navigation Javascript Solutions

The Famous Slide Out Sidebar Navigation Javascript Solutions


The Famous Slide Out Sidebar Navigation Javascript Solutions

We have seen different kinds of navigation solutions for responsive layouts. The most common solution would be transforming main navigation menu into drop down menu. However, with the popularity of Apps on mobile platform, they are bringing one of the emerging nav UI pattern into web, they called it Sidebar Navigation.

Sidebar navigation can be seen on facebook, Path and Gmail iOS and Android apps. By default, its app sidebar menu is hidden behind the main screen. Normally, the sidebar can be revealed by click on the top left corner menu icon. Below are the examples of native implementation on mobile platform.

 

Javascript/jQuery Solution

Here we have a few solutions that allow you to make web based sidebar navigation easily. The implementation might be different but its way of working, look and feel are basically the same.

jPanelMenu
A jQuery plugin that creates a paneled-style menu.

 

Sidr
Sidr helps you to create multiple sidebar menu easily. You can different menu at the same type on both side of your website.

 

Mmenu
A jQuery plugin for creating slick, app look-alike sliding menus for mobile website with only one line of javascript.

 

Building Mobile App Navigation with jQuery
A tutorial to show you how to make a mobile sidebar navigation menu.

 

jQuery Mobile Slide Menu
This is a hardware accelerated slide menu example. It's modeled after Facebook's famous menu. Click the icon at the top left of the screen to expose the menu. You can also swipe left/right activate it.

 

Snap.js
A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus).

 

Slide out menu
A recreation of sidebar navigation menu on facebook iPhone app.

Conclusion

Sidebar Navigation is one of the navigation methods that starting to gain attention. This method is particularly famous in web app. Depend on your needs, there are many other methods for your responsive website as well. You will have to choose one according to the nature of your project and the size of your nav.

Have you seen some other sidebar navigation menu? Or do you see a drawback of using such menu? Let us know.

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

6 comments

Christian
Thu, 26th September 2013
I have tried all your suggested solutions. But they didn't satisfy all of my requirements. May you want to check out my solution:

http://waxolunist.github.io/navslider Reply
Jeff
Mon, 4th November 2013
I hope it's okay sharing this awesome wordpress plugin to everyone ;). If you want slide out sidebar navigation or widget on your wordpress site feel free to check this <a href="http://codecanyon.net/item/gilidpanel-wordpress-sliding-panel-sidebar/5753924?ref=phpbits">GilidPanel - WordPress Sliding Panel Sidebar</a>

Cheers! Reply
Adam Smith
Tue, 14th January 2014
I have also created a revealing menu/sidebar plugin named Slidebars. Its stripped right back, so can be fully customised for any project. It uses CSS transitions and transformations for ultra smooth animation, and has huge browser compatibility. Check it out here: http://plugins.adchsm.me/slidebars/ Reply
ikselll
Fri, 4th April 2014
Great plugin! I can't find better. Fast, simple. One thing I miss i 'drag to open' action ;) Reply
Jay
Thu, 26th June 2014
I wish you could actually swipe the menus. I found the left side menu to be slow, compared to the right, and I cannot swipe on mobile.

I'm using a Galaxy s3 Android 4.2.2 I believe. Reply
Palian Schulz
Sat, 18th January 2014
Hey, thanks for the awesome collection!
IT helped me a lot, i will definitely use one of the sidebars in my next project! Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement