• Skip to primary navigation
  • Skip to main content
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Subscribe
WittySparks / Technology / Programming / Slide-out or Navigation Drawer jQuery Menus for your next web app!
jQuery based Slideout menus or Navigation Drawer

Slide-out or Navigation Drawer jQuery Menus for your next web app!

Programming May 20, 2013 by Sravan Kumar Kandagatla

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.

Appreciate your opinion on this topic on social media by tagging us @wittysparks
  • LinkedIn
  • Twitter
  • Like
  • Pinterest

Related Topics

  • Pickadate.js – jQuery mobile friendly and lightweight date picker!
  • DateBox – A Date and Time Picker plugin using jQuery Mobile
  • Add Timepicker to jQuery UI Calendar or Datepicker
Launch Offer
Rocket.net - Managed WordPress hosting
Rocket.net - Managed WordPress hosting
$1 for first month, $25/month

A highly secured WordPress hosting platform powered by Cloudflare enterprises with customized services for agencies, eCommerce, and small businesses.

  • PageSpeed Guarantee
  • Ultra Secure Platform
  • FREE Migrations
  • Automatic Updates
Try for $1.00 Our Review
We earn a commission if you make a purchase, at no additional cost to you.

Our Favorite Tools

Semrush - SEO and Marketing Tools
Semrush - SEO and Marketing Tools
$119.95/mo
Try for FREE Our Review
Semrush - SEO and Marketing Tools
Lasso - All-in-one Affiliate Marketing Plugin for WordPress
$29/month
Start Free Trial Our Review
Semrush - SEO and Marketing Tools
Grammarly - AI-powered writing assistant
$12.00 / month
Try for FREE Our Review
Previous Post: « Bill Gates back on top of the rich list
Next Post: Revisit the world of Smurfs on 31st July this year! »

Reader Interactions

Profile picture for Anonymous

About Sravan Kumar Kandagatla

Founder of WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan Kumar Kandagatla
  • LinkedIN
  • Twitter
  • Pinterest
  • Facebook
  • Instagram

Comments

  1. Profile picture for Lars JeppesenLars Jeppesen says

    September 8, 2013 at 8:56 pm

    Thanks

  2. Profile picture for Rohit ChatterjeeRohit Chatterjee says

    September 12, 2013 at 8:43 pm

    thank you!

  3. Profile picture for JackJack says

    December 14, 2013 at 6:55 pm

    Thanks a lot!

Footer

Search

Exclusive Coupons

  • Moqups Review - Use coupon code “WITTYSPARKS" for 20% off or "PARTNERS50" for 50% discount on all plans.
  • Serpstat Review - Use coupon code "wittysparks_discount" for 30% off.
  • WPForms Review - Use coupon code "WITTYSPARKS" for 50% off.
  • WPPayForm Review - Use coupon code "wittysparks" for 10% to 40% off.

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2022 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • Affiliate Disclosure