In this tutorial I’ll show you how to create and publish module in the offcanvas of DJ-MegaMenu. I assume that you already know a bit about this extension, how to use and manage it. If it is not, then I invite you to read:
documentation of DJ-MegaMenu
What is offcanvas menu? How can I set it?
I assume that you have a menu that looks something like that:
Offcanvas menu is a menu that is displayed in the sidebar. It is especially useful in responsive views, where the width of the screen is narrow (typically for a mobile devices). Thanks to the sidebar menu, we are sure that the menu will be visible, and navigation through the website will be easy and comfortable.
How to set it? Go to the Extensions-> Modules-> Your DJ-MegaMenu module
Go to the "Mobile Menu Option" tab.
Mobile Menu- choose Offcanvas Menu
Mobile menu trigger width- type the screen width (in pixels) below which the usual menu will change to offcanvas menu.
Click save and close. Your menu in a given screen width should looks like that:
Now I'll show you how to create your own modules in offcanvas menu.
There are two module positions built in DJ-Megamenu:
dj-offcanvas-top / dj-offcanvas-bottom - these are standard module positions and you can use them for any type of modules
Go to Extensions-> Modules-> Your module and set position to "dj-offcanvas-top" or "dj-offcanvas-bottom". Don’t worry if you can’t find these names in the list of available positions, these are internal positions of the DJ-Megamenu and probably won’t be on the list of template positions. Just type the name of position and press Enter.
Remmeber to save module settings.
Congratulations! In this way you can publish any type of modules in the DJ-Megamenu Offcanvas menu. Example: