What makes Elemental Menu different?

Published on March 30, 2021 by WP Clevel in News.

Since the release of Elemental Menu, we received many questions about the product: “What is so good about it?”, “What makes it different?”… If you’re questioning about its capability, let get down into the details.

Back to 2019, when I first developed Clever Mega Menu for CleverSoft based on the famous JetMenu addon, I felt like I can make something better. But, at that time, I just wanted to get the job done by finishing what I was assigned and left the following problems unsolved:

Counterintuitive UI

The settings UI of the JetMenu, I believe, was inspired by the UI of the Max Mega Menu plugin: a separate menu appearance settings page and some more settings on the Appearance > Menus page. These fragmental settings are good with Max Mega Menu but it’s old-fashioned when combining with Elementor. Elementor has a far superior live controls which handle those appearance settings really well and you can see that in their Nav Menu widget.

The popup editor of the JetMenu is also fragmental. We have to open a separate window to preview changes in a complete context instead of previewing live changes directly on the Elementor editor.

In Clever Mega Menu, I tried to fix this problem by creating a mockup menu when editing a menu item and converting menu item settings to live Elementor controls:

But it wasn’t complete. CSS of the mockup menu was hardcoded separately instead of copying the CSS from the assigned menu skin. So the changes in the assigned menu skin do not reflect the skin of the mockup menu. The previewing context is also incomplete. It does not cover other elements which are in the same section with the previewing menu.

Performance

JetMenu is too heavy. I don’t know why they have to enqueue a separate version of the Font-Awesome along with the default version enqueued by Elementor. Maybe it’s for backward compatibility. There are other requests including the whole Vue.js library which is overkill for a navigation menu component.

Clever Mega Menu is less heavy. But it also enqueues a separate version of the Font-Awesome along with a custom icon font.

Orphaned data

With both JetMenu and Clever Mega Menu, the first time you edit a menu item, a hidden post is created and loaded into the Elementor editor. The content of a mega menu item you see on the frontend is actually the content of the hidden post. The idea came from a mega menu builder developed by an Envato author called “truongsa”. I copied his idea when developing the Clever Mega Menu For WPBakery Visual Composer.

The problem with this idea is that if the data of the hidden post isn’t deleted when a menu item or a menu is deleted, there will be a large amount of orphaned data in the database. And that happens with both JetMenu and Clever Mega Menu.

How did we solved the problems

Everything is live, truly live

The first thing we did was to make sure that there’re no fragmental settings and every control must be live. This can be achieved with the Elementor controls. We planned sections and controls in a logical UI then put all of them into a single widget just like the Nav Menu widget of the Elementor Pro. We named it Elemental Menu.

Now that everything is live when adjusting the appearance of a menu, we also need a streamlined editor for each menu item with an intuitive UI.

Unlike JetMenu or Clever Mega Menu, Elemental Menu renders inline edit button for each menu item:

By clicking on that buttons, a menu item editor will show up with a cloned editing menu context. And not like the way I did in Clever Mega Menu, instead of a mockup context, the cloned editing menu context is now completely cloned with our new smart context-aware.

The algorithm behind the smart context-aware is that: every time users saved the editor, Elemental Menu will save the ID of the grand section which contains the editing menu then use that ID to render the editing menu context. Thanks to CSS Manager and Elements Manager in Elementor, we can truly mimic a streamlined editing context:

As you can see, changes in menu edit screen immediately reflect changes in the menu item edit screen and vice versa.

If you don’t get the idea, just think about the seamless experience when you don’t have to leave the Elementor editor because everything is now streamed and can be previewed directly on your editor.

Custom code FTW

Performance is always our first priority. We try to write custom code in every project we do to keep everything as fast as possible. And by doing that, our Elemental Menu only needs two lightweight requests on the frontend even though it has bunch of features:

We even write a custom menu rendering function to remove backward compatibility, unnecessary logic and make menu items’ data cacheable with the Object Cache:

Invalidate unused data

The event-driven architecture and runtime overriding of WordPress makes things a lot easier. We can easily override the WordPress’s wpNavMenu.removeMenuItem function to delete hidden posts’ data after a menu item deleted.

Similarly, we use before_delete_post hook to delete the hidden posts’ data of each menu item when users deleting a menu. Note that you can’t use the wp_delete_nav_menu hook because, at the time of it is triggered, it’s too late to delete the hidden posts’ data. You can’t query metadata of a post which was already deleted.

….

That’s how we solved critical problems with other popular Elementor menu addons. If you don’t understand those technical stuff, you can try it yourself to see how things work.

The original name of Elemental Menu is Mega Menu Pro For Elementor. We just renamed it to Elemental Menu few days ago because we decided to make it a complete menu builder for Elementor, not just a mega menu builder.

Since Elemental Menu has unlocked all possible mega menu layouts, in the upcoming releases, we will enhance animation and add functionality to create other kind of navigation menus such as fullscreen menus.

Stay tuned!