Mobile Update for Mega Menu: Color Customizer, WCAG and More

26 November, 2021

DJ-MegaMenu just got another BIG update. With this one, we've updated the mobile menus to get them more customizable with a color customizer, increased mobile accessibility by adding support for a keyboard for mobile menus, added a few more improvements, including making it faster when more instances are loaded, and fixed some minor problems.

The most significant improvements:

We've added a mobile menu color customizer with a new particular custom theme
All mobile menu types can now be controlled with the keyboard (WCAG 2.0 and Section 508)
Updated Font Awesome - to version 4.5
Added option for the delay before the OPEN submenu action
Enhanced the speed when more than one instance of the DJ-MegaMenu module is loaded by reducing multiple injections of stylesheets
fixed minor problems - see the whole changelog

Mobile Menu Color Customizer

This new feature works similarly to the desktop mega menu color customizer.

With this feature, you can customize the colors of Off Canvas and Accordion mobile menus.

Once you update your DJ MegaMenu with the 3.3 version, you'll find a new Mobile Menu Theme option in the Mobile Menu Options tab.

When the - custom - theme is chosen you can set your colors same way as for desktop menu:

Possible settings of colors include:

Open button background
Open button color
Menu background
Menu text
Menu subtitle
Active menu background
Active menu text
Active menu subtitle
Submenu background
Submenu text
Submenu subtitle
Active submenu background
Active submenu text
Active submenu subtitle
Module text

Thanks to these rich settings, you can easily fit the mobile menu to your website without modifying CSS or any files. Just open the settings, and feel free to play and find the best color settings.

WCAG 2.0 and Section 508 ZKeyboard Control for Mobile Menus

Another new feature that will help your site be WCAG 2.0 compliant is the option to navigate through the mobile menu with the Tab key on the keyboard.

With the Tab key, you can navigate forward, and clicking the Shift key + Tab gives the way back, so it's easy to navigate through all the menus with the keyboard if some of your website users cannot use a mouse or touchpad.

In the animated gif below, you can see how it works (the keystrokes are displayed). I'm using only three keys: