Create Sliding Hamburger Menus with jQuery Sliding Framework

UX designers bicker over the use of hamburger menus in web design. They serve a purpose for mobile users but also have lower discoverability.

I can’t say if they’re worth using on your website or not, but if you’re looking for an easy way to set up a sliding menu then the Slidebars Framework is a handy resource.

Slidebars is totally free and open-source, built on top of the jQuery library. It works just like you’d expect where you click a hamburger icon to open a sliding menu and it pushes the screen off-canvas to make room.

One feature I especially like is the tap-to-hide setup where you can tap anywhere on the page to immediately hide the menu. This isn’t built into every sliding menu plugin but it’s a feature that greatly improves the user experience.

This plugin is totally open-sourced and the code is available for free on GitHub if you wanna poke around. However, the repo is missing a clear set of documentation which makes setup tougher.

Thankfully, you can find this on the main site with full usage guides for getting Slidebars up & running fast.

It supports sliding menus from all four sides of the screen, along with custom features for animation effects, color choices, and total width/height of the menu.

The entire sliding menu works on an off-page element, so you need to set up the off-canvas menu properly. This includes both proper HTML and the proper CSS for styling.

All of this is detailed thoroughly in the documentation, so if you follow the pages step-by-step you should get it working just fine. And, the default setup doesn’t require any custom properties, so if you just follow the basic steps you’ll have no trouble.

Slidebars really is a full framework and it even has a custom API you can work over. It allows you to call jQuery functions to add features or customize default functionality. An excellent choice for developers who need a sliding menu but don’t want to create one from scratch.

If you’re curious to learn more check out the Slidebars website. It has literally everything you need to know and plenty of demos to go around.

Read Also: Animate to Hide and Slide Content with jQuery [Tutorial]