MegaMenu

MegaMenu

new MegaMenu(element, options)

Source:
Parameters:
Name Type Description
element HTMLElement

DOM element for component instantiation and scope
options Object
Properties
Name Type Description
openSelector String

Selector for the hamburger button
backSelector String

Selector for the back button
innerSelector String

Selector for the menu inner
itemSelector String

Selector for the menu item
linkSelector String

Selector for the menu link
subLinkSelector String

Selector for the menu sub link
megaSelector String

Selector for the mega menu
subItemSelector String

Selector for the menu sub items
labelOpenAttribute String

The data attribute for open label
labelCloseAttribute String

The data attribute for close label
attachClickListener Boolean

Whether or not to bind click events
attachHoverListener Boolean

Whether or not to bind hover events
attachFocusListener Boolean

Whether or not to bind focus events
attachKeyListener Boolean

Whether or not to bind keyboard events
attachResizeListener Boolean

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:
Name Type Description
menuItem Node

closeOpenDropdown(esc,)

Description:

  • Deselect any opened menu item

Source:
Parameters:
Name Type Description
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:
Name Type Description
e Event

handleClickOnBack()

Description:

  • Get back to previous list (on mobile)

Source:
Fires:

handleClickOnClose(e)

Description:

  • Close menu list.

Source:
Parameters:
Name Type Description
e Event
Fires:
  • Menu#event:onClose

handleClickOnItem(e)

Description:

  • Click on a menu item

Source:
Parameters:
Name Type Description
e Event
Fires:

handleClickOnOpen(e)

Description:

  • Open menu list.

Source:
Parameters:
Name Type Description
e Event
Fires:

handleClickOnSubitem(e)

Description:

  • Click on a subitem

Source:
Parameters:
Name Type Description
e Event

handleClickOnToggle(e)

Description:

  • Toggle menu list.

Source:
Parameters:
Name Type Description
e Event

handleFirstPanel(menuItem, op)

Description:

  • Show/hide the first panel

Source:
Parameters:
Name Type Description
menuItem Node
op string

(expand or collapse)
Fires:

handleFocusOut(e)

Description:

  • Focus out of a menu link

Source:
Parameters:
Name Type Description
e Event
Fires:

handleKeyboard(e)

Description:

  • Handles keyboard events specific to the menu.

Source:
Parameters:
Name Type Description
e Event

handleKeyboardGlobal(e)

Description:

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

Source:
Parameters:
Name Type Description
e Event

handleResize()

Description:

  • Trigger events on resize Uses a debounce, for performance

Source:

handleSecondPanel(menuItem, op)

Description:

  • Show/hide the second panel

Source:
Parameters:
Name Type Description
menuItem Node
op string

(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:
Name Type Description
eventName string

The name of the event to listen for.
callback function

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:
Name Type Description
desktop string

or mobile

trigger(eventName, eventData)

Description:

  • Trigger a component event.

Source:
Parameters:
Name Type Description
eventName string

The name of the event to trigger.
eventData any

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:
Name Type Description
root HTMLElement

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: