June 27, 2020

Mega Menus Added To Core Design Set For Oxygen

Mega Menus Added To Core Design Set For Oxygen
Check out the interactive cheatsheet or print for later!
Cheatsheet

The wait is over! I received many messages requesting more menus and especially mega menus so here they come as the first update of Core by OxyNinja.

Here's a short video showcasing all new menus.

FAQ

How do I update the design set?

You do not need to do anything to start using menus from this update! The design set itself has been updated and from now on the mega menus should be part of the design set and can be found in the usual place of "Headers" in the library. Just use the design set as you are used to and enjoy new menus.

How the mega menus are created and how to use them?

These menus are based on CSS and a little bit of jQuery for mobile toggles.

When you add the new menu, pay attention to the Code Block which is a hamburger icon (for mobile toggle), and also contains custom CSS and JS. If you delete this Code Block, the menu will stop working.

NOTE: The last three menus with slide-in sidebar menu and slide from the top menu are using jQuery also for a desktop toggle. When you click on the hamburger menu, it adds the class to a menu container which makes it slide into the viewport.

Normally there is a class on a menu container named "c-menu-sidebar-1". If a user clicks on a menu icon, it adds this class to the menu "c-menu-sidebar-1-active". A small problem is that in default state you would not see the menu in Oxygen editor, so you couldn't edit links easily. There is an easy fix by adding the active class to the menu manually and remove it after you finish the edits. The active class is already there when you import it from the library, so do not forget to remove it from the menu after you finish editing.

These menus can include any kind of content. Feel free to play with it, copy / paste, and combine with other elements. If you are in doubt, feel free to contact me for help.

Enjoy!

CORE
A popular Core framework & design set made for Oxygen Builder
Purchase Core
Core Documentation
Live Sections
WOOCORE
The biggest WooCommerce design set for Oxygen Builder
Purchase WooCore
WooCore Documentation
Live Demo