Menu

Menu

Source:
Parameters:
NameTypeDescription
elementHTMLElement

DOM element for component instantiation and scope

optionsObject
Properties
NameTypeDescription
openSelectorString

Selector for the hamburger button

closeSelectorString

Selector for the close button

backSelectorString

Selector for the back button

innerSelectorString

Selector for the menu inner

listSelectorString

Selector for the menu items list

itemSelectorString

Selector for the menu item

linkSelectorString

Selector for the menu link

buttonPreviousSelectorString

Selector for the previous items button (for overflow)

buttonNextSelectorString

Selector for the next items button (for overflow)

megaSelectorString

Selector for the mega menu

subItemSelectorString

Selector for the menu sub items

maxLinesInt

Number of lines maximum for each menu item (for overflow). Set it to zero to disable automatic resize.

maxLinesAttributeString

The data attribute to set the max lines in the markup, if needed

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

Menu

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

checkMegaMenu(menuItem)

Description:

  • Handle positioning of mega menu

Source:
Parameters:
NameTypeDescription
menuItemNode

checkMenuItem(menuItem)

Description:

  • Check for a specific menu item how to display it:

    • number of lines
    • mega menu position
Source:
Parameters:
NameTypeDescription
menuItemNode

checkMenuOverflow()

Description:

  • Check how to display menu horizontally and manage overflow

Source:

closeOpenDropdown()

Description:

  • Deselect any opened menu item

Source:

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:

handleClickOnCaret(e)

Description:

  • Click on a menu item caret

Source:
Parameters:
NameTypeDescription
eEvent

handleClickOnClose(e)

Description:

  • Close menu list.

Source:
Parameters:
NameTypeDescription
eEvent
Fires:

handleClickOnNextItems()

Description:

  • Click on the next items button

Source:

handleClickOnOpen(e)

Description:

  • Open menu list.

Source:
Parameters:
NameTypeDescription
eEvent
Fires:

handleClickOnPreviousItems()

Description:

  • Click on the previous items button

Source:

handleClickOnToggle(e)

Description:

  • Toggle menu list.

Source:
Parameters:
NameTypeDescription
eEvent

handleFocusIn(e)

Description:

  • Focus in a menu link

Source:
Parameters:
NameTypeDescription
eEvent

handleHoverOffItem(e)

Description:

  • Deselect a menu item

Source:
Parameters:
NameTypeDescription
eEvent

handleHoverOnItem(e)

Description:

  • Hover on a menu item

Source:
Parameters:
NameTypeDescription
eEvent

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:

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
menu.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:

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

onClose

Source:

onOpen

Source: