API
Menu
Parameters
element
HTMLElement DOM element for component instantiation and scopeoptions
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, defaulttrue
)options.attachResizeListener
Boolean Whether or not to bind resize events (optional, defaulttrue
)
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
handleClickOnOpen
Open menu list.
Parameters
e
Event
handleClickOnClose
Close menu list.
handleClickOnBack
Get back to previous state.
handleClickOnLink
Click on a menu item
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();