This code adds a custom widget area named Side Menu which can be toggled open/close by clicking the animated menu icon.
Here’s the demo video showing you exactly what the code does tested using the Genesis Sample child theme by StudioPress.
Demo Video
The demo shows a new widget area added named Side Menu which is populated with a custom menu widget and a custom HTML widget containing address HTML.
The code positions animated menu bars in the header which opens and closes the widget area. The widget displays over the content of the page unlike this solution which pushes the content ( off canvas ) to the side.
Easy To Work With Code
This tutorial contains a hand coded solution which beginners may find much easier to work with & understand compared to some jQuery plugins which contain a large amount of JS.
- Only a few lines of jQuery ( easy to extend/modify )
- Easy to reposition the animated hamburger menu icon using CSS
- Easy to modify the sidebar widget area CSS.
Code Installation
Once you have the downloaded the members only files, there’s 4 simple steps.
Step 1 : From the download folder, upload the toggle.js file to your child themes root directory.
Step 2 : From the download folder, copy & paste the PHP code from the functions.php to the end of your child themes functions file.
Step 3 : From the download folder, copy & paste the CSS from the style.css file to the end of your child themes style.css file and clear caching.
Step 4 : Add any widget(s) to the Side Menu widget area.
Register or login to access the download folder :