The Famous Slide Out Sidebar Navigation Javascript Solutions

Written by Kevin Liew on 28 Jun 2013
184,914 Views • Web Development

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.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

7 comments
Christian 11 years ago
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 10 years ago
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 10 years ago
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 10 years ago
Great plugin! I can't find better. Fast, simple. One thing I miss i 'drag to open' action ;)
Reply
Jay 10 years ago
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 10 years ago
Hey, thanks for the awesome collection!
IT helped me a lot, i will definitely use one of the sidebars in my next project!
Reply
Raj 9 years ago
There is also a good tutorial on slide in and slide out menu on TalkersCode.com http://talkerscode.com/webtricks/slide-in-and-slide-out-navigation-menu-using-jquery-css.php
Reply