Top Sliding Menu Javascript And Jquery plugins
Check out our top sliding menu scripts, created in either JavaScript, jQuery and CSS. Having a Sliding Menu for your layout is great for a mobile experience, compacting your layout and giving it a modern-day look. In the old days, you would have to program your own javascript solution to handle sliding sidebars and menus, but now there are plenty of pre-made solutions to help save you time. I recently had to use a sliding menu for a project, so this post is going to take a look at some of the sliding menu scripts that I came across.
Take a look at our list of Sliding Menu scripts that you can use for your own project. Some of these scripts do require a license to be used in commercial scripts, so make sure you read the license before implementing them into your solution.
#1 - MMenu
Mmenu is a sliding menu app written in vanilla JavaScript. It has native support for mobile apps and allows you to implement menus just like apps in the Appstore. It has support for both JavaScript and jQuery and comes with plenty of addons to help you with building your website's navigational systems. They provide quite a few tutorials and documentation, but I did struggle to find out simple things with this menu, such as modifying the CSS (it uses SASS). Whilst the tutorials give you a basic oversight, to figure out how to do some more of the complicated stuff you'll have to dig deeper into the documentation and play around with it.
Mmenu.JS is the upgraded version of the old mmenu, so when searching for support/help/questions, you can very often come across old content that confuses you with the legacy version. The code can be viewed in full in it's Github respository and you can play around with the demos to see if this menu is to your liking.
Supports: JavaScript, jQuery
License: Free for personal, $10 for commercial.
#2 Slideout
Slideout.js is another great slideout navigation script that can easily implement menu systems for you in seconds. Coming in at just 2 KB in size, this compact script has no dependencies and has very minimal coding knowledge needed to get started. It comes with some great examples and a decent plain-and-simple usage section to demonstrate how this plugin performs. It doesn't require a SASS generator to modify the CSS and is very minimal to customise. Whilst it doesn't have lots of addons and features like some Sliding menus, it works great for what it does.
Supports: JavaScript
License: Free (MIT)
#3 Slide Menu
Slide Menu is a more basic approach to having sliding menus. It's doesn't come with a million add-ons or bells and whistles, but it does do the job of having sliding menus. It also has nesting menus, which slide in and out as you navigate through the different layers. It's written independently of jQuery and is very lightweight in filesize. It does support IE 11, but you'll need to make sure you download the right version if this browser is a priority for your application.
Supports: JavaScript
License: Free (MIT)
#4 Bootstrap Sidebar - MDB
I've included this sliding menu in because I think it offers a unique way of implemnting sliding menus. If you're familiar with using bootstrap ui kits, this kit includes a sliding menu. That means, of course, to use this sliding menu you also need to implement MDB. MDB is Material Design for Bootstrap 4, it's completely free and offers lots of unique elements. One of those is the popular sliding menu called SideNav. It's responsive out of the box, so perfect for mobile web sites and has plenty of configurable options to customize the menu, including changing animation speed, size, color and more. You can check out SideNav here.
Supports: JavaScript
License: Free (MIT) (there is also a PRO license for more addons)
#5 Pure Drawer
Last updated in 2015, Pure Drawer is another simple to use slideout menu script. Free under the MIT license, it comes with many animation effects, including Bounce, Fade, Zoom and plenty more to give your site a unique style and feel. It works in all modern browsers and also supports older browsers such as IE9 too, using graceful degrades to facilitate missing functionality. This is also a pure CSS solution, so no JavaScript or jQuery is required to get it working. It uses CSS transitions for animation and the result is a smooth, lightweight sliding menu.
Supports: CSS
License: Free (MIT)
#6 Slider Menu
This sliding menu is a very lightweight solution (just 1.88 kb!) and allows you to create sliding menus with minimal effort. It was made during the era of older browsers, which means it supports: Tested in Chrome 56, FF 51, Safari 10, IE 10. It supports both multi-menus, sliding between the different levels to make for a very easy to use solution. It was last updated 2 years ago, so it's still being maintained.
Supports: jQuery
License: unknown
#7 Snap.JS
Snap.JS is a independent library for creating sliding menus. It has great support for older browsers, with CSS3 fallbacks to help accomodate for missing functionality. Snap.JS allows you to drag and pull menus from the side, and they will "snap" into place as sidebars. It comes with many different customization options, and is very simple to get working. It also has great documentation for getting setup, with simple examples and demos that you can use to explore the features of this library.
Supports: JavaScript
License: Free (MIT)
#8 Sliiide
Our final entry to this list of sliding menus is Sliiide. This library requires jQuery 2.1.0, but it may work with older versions (author's words, not mine!). Sliiide is a very simple sliding menu, with just four main methods for creating your menu. If you need something with a bit more functionality and customization, you may want to check some of the others. For a basic sliding menu however, this should be fine.
Supports: jQuery 2.1.0
License: Free (MIT)
Leave A Comment