Menu List

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

Meet the Family

<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

Download the App

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

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