Create a simple Sidebar menus or off-canvas navigations using jQuery and CSS

By admin / 2:48 am, 15 Apr 2016 / CSS, jQuery / 0 Comment

Here is the HTML structure of sidebar navigation :-

Now create a button so that you can click them for toggling reveal of your sidebar menu:-

Now use this script for toggling sidebar menu :-

Add this CSS for styling of Navigation Layout. This is a simple layout, you can customize according to your theme style :-

Now we have to add functionality for sliding down menus containing sub-menus. Add this jQuery part in custom js file or add in footer :-

For menu which has child menus, you need to remove href tag from that menu. use this script for removing href tag :-

You can check the demo below to see the final effect.

View Demo

Previous Post
Next Post