Popups: How To Create A Slide-In Menu
To create a Slide-In menu you need to use the Header Popups functionality of Divi MadMenu.
- 1
-
First add a new section to your header template, set its height to 100vh because the Slide-In menu needs to be stretched from top to bottom of the viewport, and then set its width(eg.: 200px).
- 2
-
Then turn this section into a popup by adding the same unique ID to this section and the MadMenu Button element that will be toggling the Slide-In menu.
- 3
-
Next set its location to the desired side of the viewport and apply the appropriate opening and closing Slide animations.
For example, if you align the Slide-In menu to the right side of the screen then normally you'd set the Slide In Right and Slide Out Right animations as its opening and closing animations respectively.
However, you can set any other location and animation combinations as well.
- 4
-
After the Slide-In menu section is configured to slide in and slide out on button click you need to add its content using any of the available modules and design the menu normally like any other Divi Builder section.
Watch this tutorial to learn in more detail about how to create a Slide-In menu: