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

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Newsletter
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 K

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.

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
Previous Post: « Bill Gates back on top of the rich list
Next Post: Google Fiber moves on to providing Wireless Internet! »
Profile picture for Sravan K

About Sravan K

Contributor at 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 K

Primary Sidebar

Search

Exclusive Coupons

  • Moqups coupon code: WITTYSPARKS for 20% or PARTNERS50 for 50% discount.
  • WPForms coupon code: WITTYSPARKS for 50% off.
  • Serpstat coupon code: wittysparks_discount for 30% off.
  • SEO Buddy coupon code: WITTYSPARKS for 25% off.
  • Morningscore coupon code: wittysparks for 30% off for 3 months.
  • FlexClip coupon code: WITTYSPARKS for 30% off.
  • Uplead coupon code: “witty” for 30-day free trial.
  • FastestVPN coupon codes: WITTYSPARKS15 or WITTYSPARKS10 or Get up to 93% OFF.
  • Outranking.io coupon code: WITTYSPARKS50 for 50% off.

For more such offers visit our exclusive offers for SEO, Bloggers, Marketers and for Business owners.

Featured Productivity Software

Notion logo
Notion

Whether you’re a solo entrepreneur or a large team, Notion Workspace can help you stay organized and get more done. Get started today and take your productivity to the next level.

Try Notion for FREE

Footer

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 © 2023 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • LinkedIn
  • Twitter
  • Like
  • Pinterest