npm package: @pie2211/shopify-simple-menu
Description: Module for building a basic Shopify menu with drop down and mega menus. Implements ARIA semantics, keyboard menu traversal and mouse events. This is not a full Aria application menu it is a hybrid approach combining Aria state buttons combined with sema
Latest version: 1.0.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Shopify Simple Menu

Module for building a basic Shopify menu with drop down and mega menus.
Implements ARIA semantics, keyboard menu traversal and mouse events.
This is not a full Aria application menu it is a hybrid approach combining Aria state buttons combined with semantic HTML menus. 

## Installation

```
npm i shopify-simple-menu --save
```

## Basic dropdown menu markup (pre-liquid)

Notes:
- There are no checks for empty menu lists. This should be implemented as conditionals in the Liquid template.
- Unique IDs referencing button/menu data value pairs should be generated in Liquid when outputting multiple menu instance to a page.
- Currently does not support nested sub menus, hence the simple tag in the name.

Minimum markup required to test the script would consist of a HTML button and list for a simple drop down menu implementation.
CSS styles and additional markup required to hide dropdown panels and provide presentation.

A button is passed as a new Button object by targeting buttons with the -js-button class.
The button's `data-opens` attribute locates the associated menu by matching its `data-tab` attribute.
Menu tab does not need to be located within the button's container.
Buttons without a submenu should not have the -js-button class applied to them.

Multiple menus can be placed in a single container or tab panel.

```html
      <!--Menu button-->
      <button class="-js-button" data-opens="menu-name">Product Category</button>
      <!--Menu tab panel-->
      <div data-tab="menu-name">
      <!--Menu list-->
        <ul>
            <li>
                <a class="-js-focus" href="#">Product A</a>
            </li>
            <li>
                <a class="-js-focus" href="#">Product B</a>
            </li>
            <li>
                <a class="-js-focus" href="#">Product C</a>
            </li>
        </ul>
      </div>
```

## Mega menu markup (pre-liquid)
*Nested submenus not supported.

Megamenu structure:

1-Parent category button  
2--Sub category heading  
3---Sub category links  

```html
<!--Menu button-->
<button class="-js-button" data-opens="menu-name">Product Category</button>
<!--Menu container-->
<div data-tab="menu-name" data-tab="mega-menu" data-type="megapanel">
  <section>
      <!--Menus tab panel-->
      <div class="mega-menu-panel">
        <div class="menu">
            <h2>
                <a class="-js-focus" href="#">Product Collection A</a>
            </h2>
            <!--Menu list-->
            <ul>
                <li>
                    <a class="-js-focus" href="#">Product 1</a>
                </li>
                <li>
                    <a class="-js-focus" href="#">Product 2</a>
                </li>
                <li>
                    <a class="-js-focus" href="#">Product 3</a>
                </li>
            </ul>
        </div>
        <div class="menu">
            <h2>
                <a class="-js-focus" href="#">Product Collection B</a>
            </h2>
            <ol>
                <li>
                    <a class="-js-focus" href="#">Product 1</a>
                </li>
                <li>
                    <a class="-js-focus" href="#">Product 2</a>
                </li>
                <li>
                    <a class="-js-focus" href="#">Product 3</a>
                </li>
            </ol>
        </div>
      </div>
  </section>
</div>
```
To initialise menu buttons pass each as a new `MenuButton` targeted by the class of -js-button.

`let menuButtons = document.getElementsByClassName('-js-button');`  
`if (menuButtons.length) {`  
`    for (let i = 0; i < menuButtons.length; i++) {`  
`        let button = menuButtons[i];`  
`        let initButton = new MenuButton(button);`  
`    }
`}

* Button must have data attribute `data-opens` referencing the associated menu or menu panel to be opened.
* Menu tab must take data attribute `data-tab` with a value set to a button's `data-opens` attribute.
* It is advised to append a unique Liquid generated ID to your data reference when planning to create multiple menu instances

### Initialised output

Once initialized, markup will have the following additional attributes applied:

```html
      <button aria-haspopup="true" aria-expanded="false">Product Category</button>
      <div>
        <ol>
            <li>
                <a tabindex="-1">Product</a>
            </li>
        </ol>
      </div>
```

### Options

By default menus are hidden and unhidden using the `hidden` attibute toggled on menu open or close.
This behaviour may interfere with CSS transitions applied to menu containers depending on the final markup structure and presentation applied.
To turn off internal hiding of the menus, pass a setting of `hideMenu: false` as an option setting.

```js
MenuButton(button, {hideMenu: false});   

```

### Methods

```js
//Open
yourMenuButton.open()

//Close
yourMenuButton.close()

//Toggle
yourMenuButton.toggle()

```

### Events

```js
yourMenuButton.on('open', function () {
  // Do something on open
})

yourMenuButton.on('close', function () {
  // Do something on close
})
```