Menu

Menu

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
closeSelector String

Selector for the close button
backSelector String

Selector for the back button
innerSelector String

Selector for the menu inner
listSelector String

Selector for the menu items list
itemSelector String

Selector for the menu item
linkSelector String

Selector for the menu link
buttonPreviousSelector String

Selector for the previous items button (for overflow)
buttonNextSelector String

Selector for the next items button (for overflow)
megaSelector String

Selector for the mega menu
subItemSelector String

Selector for the menu sub items
maxLines Int

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

The data attribute to set the max lines in the markup, if needed
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
attachTouchListener Boolean

Whether or not to bind touch 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

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

checkMenuItem(menuItem)

Description:

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

    • number of lines
    • mega menu position
Source:
Parameters:
Name Type Description
menuItem Node

checkMenuOverflow()

Description:

  • Check how to display menu horizontally and manage overflow

Source:

closeItem(e)

Description:

  • Close a menu item

Source:
Parameters:
Name Type Description
e Event

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

handleClickOnBack()

Description:

  • Get back to previous list (on mobile)

Source:

handleClickOnCaret(e)

Description:

  • Click on a menu item caret

Source:
Parameters:
Name Type Description
e Event

handleClickOnClose(e)

Description:

  • Close menu list.

Source:
Parameters:
Name Type Description
e Event
Fires:

handleClickOnNextItems()

Description:

  • Click on the next items button

Source:

handleClickOnOpen(e)

Description:

  • Open menu list.

Source:
Parameters:
Name Type Description
e Event
Fires:

handleClickOnPreviousItems()

Description:

  • Click on the previous items button

Source:

handleClickOnToggle(e)

Description:

  • Toggle menu list.

Source:
Parameters:
Name Type Description
e Event

handleFocusIn(e)

Description:

  • Focus in a menu link

Source:
Parameters:
Name Type Description
e Event

handleHoverOffItem(e)

Description:

  • Hover off a menu item

Source:
Parameters:
Name Type Description
e Event

handleHoverOnItem(e)

Description:

  • Hover on a menu item

Source:
Parameters:
Name Type Description
e Event

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:

handleTouchOnCaret()

Description:

  • Touch on a caret

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

openItem(e)

Description:

  • Open a menu item

Source:
Parameters:
Name Type Description
e Event

positionMenuOverlay()

Description:

  • Dinamically set the position of the menu overlay

Source:

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

onClose

Source:

onOpen

Source: