Mega Menu

Cara Pakai

Copy-paste script berikut sebelum tag penutup <body>:

    
      <script>
        (function() {
          // INITIALIZATION OF MEGA MENU
          // =======================================================
          new NueMegaMenu('.js-mega-menu')
        });
      </script>

How it works

Here's what you need to know before getting started with the mega menu:

Example

Columns

Adjust the size width of the mega menu, when using less columns or when the content of the container is less. Set maximum width via data-nue-mega-menu-item-options='{ "desktop": { "maxWidth": "" } }' attribute.

Alignment

Set "desktop": { "position": "left" } to "left" or "right" to align the mega menu position according to that side.

Responsive

Set your collapsing breakpoint - Determines with what resolution mobile layout is enabled. Resolution Map corresponds to Bootstrap and requires the same .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing. This example collapses the mega menu at 768 / md breakpoint.

Methods

ParametersDescriptionDefault value

eventType

 Defines the event on which the menu will be displayed. Valid values are:
  • click
  • hover
hover

direction

 Direction of the menus. Valid values are:
  • horizontal
  • vertical
horizontal

breakpoint

Determines with what resolution mobile layout is enabled. Resolution Map corresponds to Bootstrap 4'lg'

itemOptions.desktop.animationIn

Appearing effect'slideInUp'

itemOptions.desktop.animationOut

Disappearing effectfalse

itemOptions.desktop.position

Menu location during initializationnull

itemOptions.desktop.maxWidth

Sets the maximum width for the dropdown menunull

rtl

If true, displays all items from right-to-left (RTL)false

hideTimeOut

Delay of the disappearance of the menu300

sideBarRatio

Determines how much of the width the sidebar will occupy the dropdown list. Only works if direction: 'vertical'1 / 4

pageContainer

Determines with respect to which element the drop-down menu will be positioned. Only works if direction: 'vertical'$('body')

mobileSpeed

Opening speed of the menu in the mobile layout400

classMap.initialized

Class informing that the menu is ready to work'.nue-menu-initialized'

classMap.mobileState

Class informing that the menu has moved to mobile layout'.nue-mobile-state'

classMap.subMenu

Class for the sub menu. The script will look for exactly this class when working'.nue-sub-menu'

classMap.hasSubMenu

Class for items that contain a sub menu. The script will look for exactly this class when working'.nue-has-sub-menu'

classMap.hasSubMenuActive

Class given to an invoker when opening a sub menu'.nue-sub-menu-opened'

classMap.megaMenu

Class for mega menu. The script will look for exactly this class when working'.nue-mega-menu'

classMap.hasMegaMenu

Class for items that contain mega menus. The script will look for exactly this class when working'.nue-has-mega-menu'

classMap.hasMegaMenuActive

Class given to an invoker when opening a mega menu'.nue-mega-menu-opened'