Menu
But
Une barre de menu interactive comprenant des sous-menus optionnels.
Exemple
- Grands écrans : Le menu est affiché dans l'en-tête comme une barre de menu.
- Petits écrans et écrans de taille moyenne : Le menu est affiché comme un panneau latéral, activé par un bouton de menu dans l'en-tête, et comprend le menu secondaire et le pied de page.
Code
HTML dans la page
<nav role="navigation" id="wb-sm" data-ajax-replace="ajax/menu-include-fr.html" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement">
<div class="container nvbar">
<h2>Menu des sujets</h2>
<div class="row">
<ul class="list-inline menu">
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a></li>
<li><a href="#">Section 3</a></li>
</ul>
</div>
</div>
</nav>
menu-include-fr.html
<div class="pnl-strt container visible-md visible-lg nvbar">
<h2>Menu des sujets</h2>
<div class="row">
<ul class="list-inline menu" role="menubar">
<li><a href="#lore" class="item">Section 1</a>
<ul class="sm list-unstyled" id="lore" role="menu">
<li><a href="#">Article 1.1</a></li>
...
</ul>
</li>
<li><a href="#lor" class="item">Section 2</a>
<ul class="sm list-unstyled" id="lor" role="menu" >
<li><a href="#">Article 2.1</a></li>
...
<li class="slflnk"><a href="#">Section 2 - Autre</a></li>
</ul>
</li>
<li><a href="#lorm" class="item">Section 3</a>
<ul class="sm list-unstyled" id="lorm" role="menu" >
<li>
<details>
<summary>Section 3.1</summary>
<ul role="menu">
<li><a href="#">Article 3.1.1</a></li>
...
</ul>
</details>
</li>
...
</ul>
</li>
</ul>
</div>
</div>
Détails de la page
- Date de modification :