Menu

API

Menu

Parameters

• element HTMLElement DOM element for component instantiation and scope

• options Object (optional, default {})

  • options.openSelector String Selector for the hamburger button (optional, default '[data-ecl-menu-open]')
  • options.closeSelector String Selector for the close button (optional, default '[data-ecl-menu-close]')
  • options.backSelector String Selector for the back button (optional, default '[data-ecl-menu-back]')
  • options.overlaySelector String Selector for the menu overlay (optional, default '[data-ecl-menu-overlay]')
  • options.innerSelector String Selector for the menu inner (optional, default '[data-ecl-menu-inner]')
  • options.listSelector String Selector for the menu items list (optional, default '[data-ecl-menu-list]')
  • options.itemSelector String Selector for the menu item (optional, default '[data-ecl-menu-item]')
  • options.linkSelector String Selector for the menu link (optional, default '[data-ecl-menu-link]')
  • options.buttonPreviousSelector String Selector for the previous items button (for overflow) (optional, default '[data-ecl-menu-items-previous]')
  • options.buttonNextSelector String Selector for the next items button (for overflow) (optional, default '[data-ecl-menu-items-next]')
  • options.megaSelector String Selector for the mega menu (optional, default '[data-ecl-menu-mega]')
  • options.subItemSelector String Selector for the menu sub items (optional, default '[data-ecl-menu-subitem]')
  • options.maxLines Int Number of lines maximum for each menu item (for overflow). Set it to zero to disable automatic resize. (optional, default 2)
  • options.maxLinesAttribute String The data attribute to set the max lines in the markup, if needed (optional, default 'data-ecl-menu-max-lines')
  • options.attachClickListener Boolean Whether or not to bind click events (optional, default true)
  • options.attachHoverListener Boolean Whether or not to bind hover events (optional, default true)
  • options.attachFocusListener Boolean Whether or not to bind focus events (optional, default true)
  • options.attachKeyListener Boolean Whether or not to bind keyboard events (optional, default true)
  • options.attachResizeListener Boolean Whether or not to bind resize events (optional, default true)
  • options.caretSelector (optional, default '[data-ecl-menu-caret]')

init

Initialise component.

destroy

Destroy component.

useDesktopDisplay

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

handleResize

Trigger events on resize Uses a debounce, for performance

checkMenuOverflow

Check how to display menu horizontally and manage overflow

checkMenuItem

Check for a specific menu item how to display it:

• number of lines
• mega menu position

Parameters

• menuItem Node

checkMegaMenu

Handle positioning of mega menu

Parameters

• menuItem Node

handleKeyboard

Handles keyboard events specific to the menu.

Parameters

• e Event

handleKeyboardGlobal

Handles global keyboard events, triggered outside of the menu.

Parameters

• e Event

handleClickOnOpen

Open menu list.

Parameters

• e Event

handleClickOnClose

Close menu list.

handleClickOnBack

Get back to previous list (on mobile)

handleClickOnPreviousItems

Click on the previous items button

handleClickOnNextItems

Click on the next items button

handleClickOnCaret

Click on a menu item caret

Parameters

• e Event

handleHoverOnItem

Hover on a menu item

Parameters

• e Event

handleHoverOffItem

Deselect a menu item

Parameters

• e Event

closeOpenDropdown

Deselect any opened menu item

handleFocusIn

Focus in a menu link

Parameters

• e Event

handleFocusOut

Focus out of a menu link

Parameters

• e Event

autoInit

Parameters

• root HTMLElement DOM element for component instantiation and scope

• $1 Object (optional, default {})

  • $1.MENU (optional, default {})

Returns Menu An instance of Menu.

Force close

For javascript based pages or applications, you can use the css class ecl-menu--forced-close to manually close the menu on desktop view (on mobile a close function is already provided). Feel free to add/remove this class when needed.

Note: for a better display, you may want to remove/add the css class ecl-menu--transition when manually changing the close/open status of the menu.

Setup

There are 2 ways to initialise the component.

Automatic

Add data-ecl-auto-init attribute to component's markup

<nav class="ecl-menu" data-ecl-menu data-ecl-auto-init="Menu">...</nav>

Use the ECL library's autoInit() (ECL.autoInit()) when your page is ready or other custom event you want to hook onto.

Manual

Get target element, create an instance and invoke init().

Given you have 1 element with an attribute data-ecl-menu on the page:

var elt = document.querySelector('[data-ecl-menu]');
var menu = new ECL.menu(elt);
menu.init();