An expandable menu used in the Navigation component, consisting of Menu Items and an optional Card component.
mzp-has-card
class. Cards are only visible on wide viewports.mzp-has-drop-down
and mzp-js-expandable
classes.mzp-is-basic
is accessible without JavaScript. This state class gets replaced with mzp-is-enhanced
when JS is executed.Mzp.Menu.init(options)
, where options is an Object with the following properties.onMenuOpen
[Function] callback when a menu is opened (optional).onMenuClose
[Function] callback when a menu is closed (optional).onMenuButtonClose
[Function] callback when a menu close button is clicked (optional).
<nav class="mzp-c-menu mzp-is-basic">
<ul class="mzp-c-menu-category-list">
<li class="mzp-c-menu-category">
<a class="mzp-c-menu-title" href="https://www.mozilla.org/">Sample Link</a>
</li>
<li class="mzp-c-menu-category mzp-has-drop-down mzp-js-expandable">
<a class="mzp-c-menu-title" href="#" aria-haspopup="true" aria-controls="mzp-c-menu-panel-example">Sample Link with Popup</a>
<div class="mzp-c-menu-panel mzp-has-card" id="mzp-c-menu-panel-example">
<div class="mzp-c-menu-panel-container">
<button class="mzp-c-menu-button-close" type="button" aria-controls="mzp-c-menu-panel-example">
Close menu
</button>
<div class="mzp-c-menu-panel-content">
<ul>
<li>
<section class="mzp-c-menu-item mzp-has-icon">
<div class="mzp-c-menu-item-head">
<img class="mzp-c-menu-item-icon" src="/protocol/img/icons/image.svg" alt="Useful alt text where appropriate">
<h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
<p class="mzp-c-menu-item-desc">This is a short description with only a single sentence and no more.</p>
</div>
<ul class="mzp-c-menu-item-list">
<li>
<a href="#">Secondary link</a>
</li>
<li>
<a href="#">Secondary link</a>
</li>
<li>
<a href="#">Secondary link</a>
</li>
<li>
<a href="#">Secondary link</a>
</li>
<li>
<a href="#">Secondary link</a>
</li>
<li>
<a href="#">Secondary link</a>
</li>
</ul>
</section>
</li>
<li>
<section class="mzp-c-menu-item mzp-has-icon">
<div class="mzp-c-menu-item-head">
<img class="mzp-c-menu-item-icon" src="/protocol/img/icons/image.svg" alt="Useful alt text where appropriate">
<h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
<p class="mzp-c-menu-item-desc">This is a short description with only a single sentence and no more.</p>
</div>
<ul class="mzp-c-menu-item-list">
<li>
<a href="#">Secondary link</a>
</li>
<li>
<a href="#">Secondary link</a>
</li>
<li>
<a href="#">Secondary link</a>
</li>
<li>
<a href="#">Secondary link</a>
</li>
<li>
<a href="#">Secondary link</a>
</li>
<li>
<a href="#">Secondary link</a>
</li>
</ul>
</section>
</li>
</ul>
<ul>
<li>
<section class="mzp-c-menu-item ">
<div class="mzp-c-menu-item-head">
<h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
<p class="mzp-c-menu-item-desc">This is a short description with only a single sentence and no more.</p>
</div>
</section>
</li>
<li>
<section class="mzp-c-menu-item ">
<div class="mzp-c-menu-item-head">
<h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
<p class="mzp-c-menu-item-desc">This is a short description with only a single sentence and no more.</p>
</div>
</section>
</li>
<li>
<section class="mzp-c-menu-item ">
<div class="mzp-c-menu-item-head">
<h4 class="mzp-c-menu-item-title">A headline with 30 characters</h4>
<p class="mzp-c-menu-item-desc">This is a short description with only a single sentence and no more.</p>
</div>
</section>
</li>
</ul>
</div>
<div class="mzp-c-menu-panel-card">
<section class="mzp-c-card mzp-c-card-extra-small mzp-has-aspect-3-2">
<a class="mzp-c-card-block-link" href="#">
<div class="mzp-c-card-media-wrapper">
<img class="mzp-c-card-image" src="../../img/image-3-2.jpg" alt="">
</div>
<div class="mzp-c-card-content">
<h2 class="mzp-c-card-title">A short title</h2>
<p class="mzp-c-card-desc">This is an optional card included in the menu. Only visible on wide viewports.</p>
</div>
</a>
</section>
</div>
</div>
</div>
</li>
</ul>
</nav>
<script src="../../protocol/js/protocol-menu.js"></script>
<script>
Mzp.Menu.init({
onMenuOpen: function() {
console.log('Menu opened');
},
onMenuClose: function() {
console.log('Menu closed');
},
onMenuButtonClose: function() {
console.log(
'Menu close button clicked');
}
});
</script>