Menu List

A sort title, when clicked, expands a list of links.

<div class="mzp-c-menu-list">
  <h3 class="mzp-c-menu-list-title">Meet the Family</h3>
  <ul class="mzp-c-menu-list-list">
    <li class="mzp-c-menu-list-item"><a href="#">Lockwise</a></li>
    <li class="mzp-c-menu-list-item"><a href="#">Monitor</a></li>
    <li class="mzp-c-menu-list-item"><a href="#">Send</a></li>
    <li class="mzp-c-menu-list-item"><a href="#">Slightly longer menu item for testing</a></li>
  </ul>
</div>

<script src="../../../assets/protocol/protocol/js/protocol-details.js"></script>
<script>
  window.Mzp.Details.init('.mzp-c-menu-list-title');
</script>

Notes

  • Use the mzp-t-cta and mzp-t-download options to customize the appearance

Customized with mzp-t-cta and mzp-t-download

<div class="mzp-t-firefox">

  <div class="mzp-c-menu-list mzp-t-cta mzp-t-download">
    <h3 class="mzp-c-menu-list-title">Download the App</h3>
    <ul id="download" class="mzp-c-menu-list-list">
      <li class="mzp-c-menu-list-item"><a href="#">Desktop</a></li>
      <li class="mzp-c-menu-list-item"><a href="#">Android</a></li>
      <li class="mzp-c-menu-list-item"><a href="#">iOS</a></li>
      <li class="mzp-c-menu-list-item"><a href="#">Slightly longer menu item for testing</a></li>
    </ul>
  </div>

</div>

<script src="../../../assets/protocol/protocol/js/protocol-details.js"></script>
<script>
  window.Mzp.Details.init('.mzp-c-menu-list-title');
</script>