0.00 (0 votes)
Configure DJ-MegaMenu ver. 3.0 with your template.

DJ-MegaMenu version 3.0 is already released.
The new version of this advanced menu brings many long-awaited features which I would like to show you.

New mobile designs!

It's the most most important new feature. Now with DJ-MegaMenu module you can display menus for mobile devices in 3 diffrent ways:

Accordion

New stuff. Really nice "collapse" menu with the option to display menu items and modules.
You can create multi level tree (based on Joomla Menu items parent mechanism).

mega menu for Joomla - accordion

 

Offcanvas

The most most impressive option. The same as Accordion option where you can create menu with unlimited numbers of submenus and module positions in menu items.

mega menu for Joomla - off canvas

 

Additionaly you can publish your logo and modules in Offcanvas sidebar!

off canvas logo

 

Select (just for the record)

Works the same as in previous version. Display 'select' menu. Oldschool :)
But now we have a choice to display a trigger button instead direct selector.

mega menu for Joomla - select

 

Module positions

As you already know you may display module positions in menu items with DJ-MegaMenu. Now this feature has been developed.
You can create different position for desktop and mobile view.

mm3-mp

Those new configuration parameters allow you to further customize the layout to suit your needs!

TIP: How to display module inside the menu column?

 

Megamenu button

By default DJ-MegaMenu displays mobile menu in the same place as desktop menu. But now you are able do display desktop and mobile menu in different places (module positions). You just need to publish new DJ-MegaMenu Button module on selected position and 'select' menus.

mm3-button

How to configure?

For example purpose I will use new release of JM Car Dealer template based on EF4 Framework.

Desktop view

car dealer for Joomla

 

At the top of site we have:

  1. Logo
  2. Default desktop DJ-MegaMenu module with sticky option
    and 4 modules on the 'topbar' module position:
  3. Login and register links (menu module)
  4. Cart (DJ-Catalog2 module)
  5. Social icons (custom html module)
  6. Off canvas icon of EF4 Framework (custom html module)

 

Mobile view

menu mobile view

 

We have only logo and DJ-MegaMenu module. All other modules (except 'offcanvas of EF Framework' module which is not needed) wewe moved and published in DJ-MegaMenu Offcanvas.

mm3-offcanvas

 

How to achieve that? This is really easy.

 Enable Offcanvas in DJ-Megamenu module and  set logo image for Offcanvas.
 

mm3-enable-offcanvas

 

Publish DJ-MegaMenu Button module on the 'top-menu-button' position and set menus. This position was added in new release of JM Car Dealer template, but you can use any other module positions as you like.

top menu button

Duplicate Social icons and Menu modules (topbar position).
 

duplicate modules

Publish duplicated modules on 'dj-offcanvas-top' position (this is special module position in DJ-Megamenu).

publish modules

Finally you need to hide old modules for mobile view. For this purpose we use a Bootstrap utility class : 'visible-desktop'. Add suffix in 'topbar' modules.

hide modules for mobiles

Utility classes can show/hide selected module depends on screen resolution.

TIP: Utility classes for showing and hiding content by device.

 

Hope you enjoyed the tutorial :)
Good luck in the configuration!

About the author

Artur Kaczmarek
WordPress and Joomla lover. Artur Kaczmarek works as a programmer and coder at Joomla-Monster.com and PixelEmu.com. Senior products quality reviewer. Recent passed level - specialist at accessible templates (WCAG/Section508). Artur graduated IT and econometrics. He is a passionate about new technologies and in particular everything related to programming and coding for content management systems.

Users' reviews

Total rating: (0 votes) Log-in to add review

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2019 Joomla-Monster.com All rights reserved.

Joomla-Monster.com and this site is not affiliated with or endorsed by The Joomla! Project™. Any products and services provided through this site are not supported or warrantied by The Joomla! Project or Open Source Matters, Inc. Use of the Joomla!® name, symbol, logo and related trademarks is permitted under a limited license granted by Open Source Matters, Inc.