Mozilla Protocol
- 16.0.1
-
An expandable menu used in the Navigation component, consisting of Menu Items and an optional Card component.
- On wide viewports a menu’s content is displayed when hovering or focusing on a menu link.
- On small viewports a menu’s content is expanded/collapsed when clicking on a menu link.
- Menu content should consist of two lists of one or more Menu Items.
- An Extra Small Card can also be included inside a menu using the
mzp-has-cardclass. Cards are only visible on wide viewports. - A menu can also feature regular links that do not expand on hover/click by omitting the
mzp-has-drop-downandmzp-js-expandableclasses. - A menu with a state class of
mzp-is-basicis accessible without JavaScript. This state class gets replaced withmzp-is-enhancedwhen JS is executed. - A menu can be initialized using
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>