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.

      <!--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

<!--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:

      <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.

MenuButton(button, {hideMenu: false});   

Methods

//Open
yourMenuButton.open()

//Close
yourMenuButton.close()

//Toggle
yourMenuButton.toggle()

Events

yourMenuButton.on('open', function () {
  // Do something on open
})

yourMenuButton.on('close', function () {
  // Do something on close
})