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.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.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.attachClickListener Boolean Whether or not to bind click 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]')
  • options.attachHoverListener (optional, default true)
  • options.attachFocusListener (optional, default true)
  • options.attachKeyListener (optional, default true)

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)
• enough space to display all the menu items

handleResize

Trigger events on resize Uses a debounce, for performance

checkMenuItem

Check for a specific menu item how to display the 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 state.

handleClickOnCaret

Click on a menu item

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

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();