If you are working with mega menu where only 1st level opens anything you can set this for example: `:scope > .menu-item-has-children`.

Defaults to `.menu-item-has-children`.

#### openSubMenuClass (string)

Class to be added when sub menu is open. CSS styles to show/hide sub menu should be based on this class.

Defaults to `is-open`.

#### buttonClass (string)

Class to be added to toggle buttons. Even without class you can use data-attributes as selectors.

Defaults to no added class.

#### visuallyHiddenClass (string)

Class to be added to visually hidden elements. This is used for screen readers.

Defaults to `screen-reader-text`.

#### expandChildMenuText (string)

Text to be added to toggle buttons. This is used for screen readers.

Defaults to `Sub menu`.

#### hoverTimeout (number)

Time in milliseconds to wait before closing sub menu after hover moves outside of element. This is used to prevent accidental closing of sub menus.

Defaults to `750`.

#### hoverOpenDelay (number)

Time in milliseconds to wait before opening sub menu after hover. This is used to prevent accidental opening of sub menus and let cursor quickly move over the menu without opening it.

Defaults to `0`.

#### buttonIcon (string)

HTML string to be used as toggle button icon.

Defaults to SVG icon.

#### shouldWrapAnchorToButton (boolean | function)

Example:

```js
shouldWrapAnchorToButton: true
```

```js
shouldWrapAnchorToButton: ( should, a, level ) => {
return level === 1;
}
```

Defaults to wrapping when href is "#".

#### activeListItemSelector (string)

Targets active menu item. If using WordPress menus or WordPress-like markup, no changes needed.

Defaults to `.current-menu-item`.

#### openActiveSubMenuOnCreate (boolean)

If active menu item has sub menu, should it be opened on create. This should usually only be used in mobile menus or menus that are not visible on page load.

Defaults to `false`.

#### closeSubMenuOnOutsideClick (boolean)

Should sub menus be closed when clicking outside of menu. This should usually not be used on mobile menus because it may cause accidental closing of menu levels.

Defaults to `true`.

#### animateOpen (boolean)

Should sub menus be animated when opening.

Defaults to `false`.

#### animateClose (boolean)

Should sub menus be animated when closing.

Defaults to `false`.

#### animateOpenClass (string)

Class to be added when sub menu is opening. CSS styles to animate opening of sub menu should be based on this class. You can use for example animation or transitions to animate opening.

Defaults to `animate-open`.

#### animateCloseClass (string)

Class to be added when sub menu is closing. CSS styles to animate closing of sub menu should be based on this class. You can use for example animation or transitions to animate closing.

Defaults to `animate-close`.

#### animateOpenMaxExecutionTime (number)

Maximum time in milliseconds to wait for opening animation to finish. This is fallback in case animation eventhandler is not triggered.

Defaults to `250`.

#### animateCloseMaxExecutionTime (number)

Maximum time in milliseconds to wait for closing animation to finish. This is fallback in case animation eventhandler is not triggered.

Defaults to `250`.

#### onBeforeCreate (function)

Callback function to be called before menu is created. This is called only once. If you need to modify markup before menu is created, this is the place to do it.

Example:

```js
onBeforeCreate: ( menu ) => {
// wrap all anchors to span
const anchors = menu.querySelectorAll('a');
anchors.forEach((anchor) => {
const span = document.createElement('span');
anchor.parentNode.insertBefore(span, anchor);
span.appendChild(anchor);
});
}
```

Defaults to `null`.

#### onAfterCreate (function)

Callback function to be called after menu is created. This is called only once. If you need to modify markup after menu is created, this is the place to do it.

Example:

```js
onAfterCreate: ( menu ) => {}
```

Defaults to `null`.

#### onBeforeOpenSubMenu (function)

Callback function to be called before sub menu is opened. This is called every time sub menu is opened. If you need to modify markup or styling in a way that could cause flickering after sub menu is opened, this is the place to do it.

Example:

```js
onBeforeOpenSubMenu: (ul) => {
// check that sub-menu fits on right side of parent
if (ul.getBoundingClientRect().right > (window.innerWidth || document.documentElement.clientWidth)) {
ul.classList.add('is-out-of-bounds');
} else {
ul.classList.remove('is-out-of-bounds');
}
}
```

Defaults to `null`.

#### onAfterOpenSubMenu (function)

Callback function to be called after sub menu is opened. This is called every time sub menu is opened.

Example:

```js
onAfterOpenSubMenu: (ul) => {}
```

Defaults to `null`.

#### onBeforeCloseSubMenu (function)

Callback function to be called before sub menu is closed. This is called every time sub menu is closed.

Example:

```js
onBeforeCloseSubMenu: (ul) => {}
```

Defaults to `null`.

#### onAfterCloseSubMenu (function)

Callback function to be called after sub menu is closed. This is called every time sub menu is closed. If you need to modify markup or styling in a way that could cause flickering before sub menu is closed, this is the place to do it.

Example:

```js
onAfterCloseSubMenu: (ul) => {
// remove out of bounds class
ul.classList.remove('is-out-of-bounds');
}
```

Defaults to `null`.

## Acknowledgements

This library has taken a lot from [MEOM/navigation](https://github.com/MEOM/navigation). Although we have a different approach to many things, it has been a great source of inspiration and ideas.

## Change log

### 1.0.3

Add support for hover open delay. This allows cursors to quickly move over the menu without opening it. This is good for huge mega menus.

### 1.0.2

Prevent double initialization of menu. This could happen by human error or by some cookie consent scripts that re-run scripts after consent is given.

### 1.0.1

Fix issue of shouldWrapAnchorToButton copying links content with textContent and in case link actually has some inner HTML elements those would not be copied. This is now changed so that all inner HTML elements are moved which is the appropriate thing to do.

## Development

Install tools `npm install` and build `npm run build` or develop with `npm run watch`.

Releasing new version: