APEX & multicolumn navigation (custom mega menu)

W

When the mega menu came out, I was very pleased. Then I tried to use it and quickly abandon it. Now I wanted to cleanup my menus so I build my own.

What I wanted was to have the several multicolumn menus, not just one. With icons, badges, different levels. I also wanted to manage where exactly it will split to the new column... And without any JavaScript. So I can create something like this:

Check the article about custom navigation for some basics.

How I achieved this?

• changed template for navigation
• created view to feed the template
• add a column value to the navigation table

The template is basically just concatenating the arguments from the list, something like:

#A08#<li #A10#>#A01##A02##A03##A04##A05##A06##A07#</li>#A09#

The view (source for the list is returning these #A0?# fields:

SELECT
    n.lvl,
    n.attribute01,      -- content <li>...</li>
    n.attribute02,
    n.attribute03,
    n.attribute04,
    n.attribute05,
    n.attribute06,
    n.attribute07,
    n.attribute08,      -- before ...<li>
    n.attribute09,      -- after </li>...
    n.attribute10,      -- inside <li ...>
    n.order#
    --
FROM app_navigation_v n;

The table is same as in previous custom navigation, I have just added one more colum.

And some CSS to make this work:

#t_Header > #top_header > nav ul li div.COLUMNS {
    display             : flex !important;
    flex-direction      : row;
}