Many jQuery plugins are available to implement Slide-out menus or Navigation Drawer, which is compatible with almost all browsers and devices. Nowadays, these Slide-out menus are implemented not only for tablets or mobile apps but also for desktop websites, blogs, or apps. It saves a lot of space to accommodate and prioritize your main content.
You might have already observed these slide-out or dock menus in almost all the apps like YouTube, Google Plus, Facebook on your mobile or tablet, which actually saves a lot of space and is easy to navigate.
I don’t want to mess up your mind with many options – Here are just a few list plugins or codes which I found to be very minimal and easy to implement Navigation Drawer or slide-out menu. Following are a couple of interesting jQuery plugins which are easy to implement, and the last one on this list is my favorite, though.
Snap.JS
A Library for creating beautiful mobile shelves in JavaScript (Facebook and Path style side menus), and here is the Demo.
MMenu
– Sliding menus for your website
A jQuery plugin for creating slick, app look-alike sliding menus for your mobile website with only one javascript line. I found this MMenu sliding menu to be pretty smooth.
Meny
A three dimensional and space efficient menu created with JavaScript and CSS 3
PageSlide
A jQuery plugin that slides a webpage over to reveal an additional interaction pane by Scott Robbin
Facebook Style
Aldomatic a front-end developer and designer recreated the slide-out menu in the Facebook iPhone app. I also wanted to implement it in a jQuery mobile layout and here is a quick demo.
I found this menu to be the best among all:
Slide out mobile menu
in jsFiddle
With just a few lines of jQuery and CSS, you can achieve this cool Slide-out menu – a pretty minimal approach to consider.
Bonus: There are many ways to achieve these Slide-out menus:
jPanelMenu is a jQuery plugin
I am sure there might be some other jQuery Slide out menu plugins which you like or worked on, or implemented in some of your projects. – why not share the same via comments and share your experience on using it on a website or web app.
Article by