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

API

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.