new MegaMenu(element, options)
- Source:
Parameters:
| Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
element | HTMLElement | DOM element for component instantiation and scope | ||||||||||||||||||||||||||||||||||||||||||||||||
options | Object | Properties
|
Classes
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 |
checkMegaMenu(menuItem)
- Description:
Handle second panel columns
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
menuItem | Node |
cloneItemInTheDrowdown(menuItem)
- Description:
Clone the selected item to show it on top of the panel.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
menuItem | Node |
closeOpenDropdown()
- Description:
Deselect any opened menu item
- Source:
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: