- Passer au contenu principal
- Passer à « À propos de ce site »

# Menu

- Documentation
- Questions ou commentaires?

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

Date de modification :
  2017-06-12