MegaMenu

MegaMenu

new MegaMenu(element, options)

Source:
Parameters:
NameTypeDescription
elementHTMLElement

DOM element for component instantiation and scope

optionsObject
Properties
NameTypeDescription
openSelectorString

Selector for the hamburger button

backSelectorString

Selector for the back button

innerSelectorString

Selector for the menu inner

itemSelectorString

Selector for the menu item

linkSelectorString

Selector for the menu link

subLinkSelectorString

Selector for the menu sub link

megaSelectorString

Selector for the mega menu

subItemSelectorString

Selector for the menu sub items

labelOpenAttributeString

The data attribute for open label

labelCloseAttributeString

The data attribute for close label

attachClickListenerBoolean

Whether or not to bind click events

attachHoverListenerBoolean

Whether or not to bind hover events

attachFocusListenerBoolean

Whether or not to bind focus events

attachKeyListenerBoolean

Whether or not to bind keyboard events

attachResizeListenerBoolean

Whether or not to bind resize events

Classes

MegaMenu

Members

(static) supportedEvents :Array.<string>

Description:
  • An array of supported events for this component.

Source:

An array of supported events for this component.

Type:
  • Array.<string>

Methods

checkDropdownHeight(menuItem)

Description:
  • Calculate dropdown height dynamically

Source:
Parameters:
NameTypeDescription
menuItemNode

closeOpenDropdown(esc,)

Description:
  • Deselect any opened menu item

Source:
Parameters:
NameTypeDescription
esc,boolean

whether the call was originated by a press on Esc

Fires:

destroy()

Description:
  • Destroy component.

Source:

disableScroll()

Description:
  • Disable page scrolling

Source:

enableScroll()

Description:
  • Enable page scrolling

Source:

handleClickGlobal(e)

Description:
  • Handles global click events, triggered outside of the menu.

Source:
Parameters:
NameTypeDescription
eEvent

handleClickOnBack()

Description:
  • Get back to previous list (on mobile)

Source:
Fires:

handleClickOnClose(e)

Description:
  • Close menu list.

Source:
Parameters:
NameTypeDescription
eEvent
Fires:
  • Menu#event:onClose

handleClickOnItem(e)

Description:
  • Click on a menu item

Source:
Parameters:
NameTypeDescription
eEvent
Fires:

handleClickOnOpen(e)

Description:
  • Open menu list.

Source:
Parameters:
NameTypeDescription
eEvent
Fires:

handleClickOnSubitem(e)

Description:
  • Click on a subitem

Source:
Parameters:
NameTypeDescription
eEvent

handleClickOnToggle(e)

Description:
  • Toggle menu list.

Source:
Parameters:
NameTypeDescription
eEvent

handleFirstPanel(menuItem, op)

Description:
  • Show/hide the first panel

Source:
Parameters:
NameTypeDescription
menuItemNode
opstring

(expand or collapse)

Fires:

handleFocusOut(e)

Description:
  • Focus out of a menu link

Source:
Parameters:
NameTypeDescription
eEvent
Fires:

handleKeyboard(e)

Description:
  • Handles keyboard events specific to the menu.

Source:
Parameters:
NameTypeDescription
eEvent

handleKeyboardGlobal(e)

Description:
  • Handles global keyboard events, triggered outside of the menu.

Source:
Parameters:
NameTypeDescription
eEvent

handleResize()

Description:
  • Trigger events on resize Uses a debounce, for performance

Source:

handleSecondPanel(menuItem, op)

Description:
  • Show/hide the second panel

Source:
Parameters:
NameTypeDescription
menuItemNode
opstring

(expand or collapse)

Fires:

init()

Description:
  • Initialise component.

Source:

on(eventName, callback) → {void}

Description:
  • Register a callback function for a specific event.

Source:
Example
// Registering a callback for the 'onOpen' event
megaMenu.on('onOpen', (event) => {
  console.log('Open event occurred!', event);
});
Parameters:
NameTypeDescription
eventNamestring

The name of the event to listen for.

callbackfunction

The callback function to be invoked when the event occurs.

Returns:
Type
void

positionMenuOverlay()

Description:
  • Dinamically set the position of the menu overlay

Source:

resetStyles(desktop)

Description:
  • Reset the styles set by the script

Source:
Parameters:
NameTypeDescription
desktopstring

or mobile

trigger(eventName, eventData)

Description:
  • Trigger a component event.

Source:
Parameters:
NameTypeDescription
eventNamestring

The name of the event to trigger.

eventDataany

Data associated with the event.

useDesktopDisplay()

Description:
  • Check if desktop display has to be used

    • not using a phone or tablet (whatever the screen size is)
    • not having hamburger menu on screen
Source:

(static) autoInit(root) → {Menu}

Source:
Parameters:
NameTypeDescription
rootHTMLElement

DOM element for component instantiation and scope

Returns:

An instance of Menu.

Type
Menu

Events

onBack

Source:

onClose

Source:

onFocusTrapToggle

Source:

onItemClick

Source:

onOpen

Source:

onOpenPanel

Source: