Mega Menu Oracle APEX

July 12, 2020Posted inAPEX

Mega Menu is collapsible floating panel which displays navigation entries at once. It enables users to reduce number of clicks to navigate.

Features of Mega Menu

  1. Customizable
  2. Icons, Descriptions, and Badges
  3. Responsive
  4. Accessible and Keyboard Friendly

How to create?

Mega menu can use the exiting menu list like Desktop Navigation Menu.

  • GO to Shared components
  • User Interfaces
  • Navigation Menu
  • Change List template to Top Navigation Mega Menu

Adding Icons to Mega Menu Items

To add Icons in Mega Menu items, the only thing is required to specify the icons in navigation list entries.

Menu item description is helpful to inform the user before navigating to the page.

Adding Badge to Mega Menu Items

  • Go to Shared components
  • Navigation list
  • GO to List entry
  • User Defined Attributes
  • 2. Badge Value
  • Enter the badge value. Application items are are also accessible from here (&APP_ITEM.).

Mega Menu Badge customization using a custom class

  • GO to Shared components
  • Navigation list
  • GO to List entry
  • User Defined Attributes
  • 7. Badge Class
Copy Code
.custom_class {
    color: red;
    background: cyan;
    font-weight: bold;
    font-size: 50px;
}

Adding Description to Mega Menu Items

Setup

In the Mega menu, we can select the special mega menu list Template, which has plenty of options available for customization.

  • Go to Shared components
  • Navigation list
  • GO to List entry
  • User Defined Attributes
  • 3. Description
  • Enter the item description

Responsiveness

Sample App

Tags: