Cramnurbel

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Barre de Navigation (Navbar) ======

===== En résumé =====

===== Barre principale =====

Source vidéo : [[https://www.youtube.com/watch?v=23bpce-5s8I]]

Le conteneur principal est un élément **nav** ayant la classe **navbar** :

<code html>
<nav class="navbar">
</nav>
</code>

Ajoutons un lien de type **brand** :

<code html>
<nav class="navbar">
    <a href="#" class="navbar-brand">NomDuSite</a>
</nav>
</code>

Ajouter les classes **navbar-light** et **bg-light** pour donner un thème et une couleur de fond à la navbar. On aurait également pu utiliser **navbar-dark** et **bg-dark**.

<code html>
<nav class="navbar navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
</nav>
</code>

Ajout d'une liste de liens. L'élément **UL** a la classe **navbar-nav**, les élements **LI** ont la classe **nav-item**, et les liens ont la classe **nav-link** :

<code html>
<nav class="navbar navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-link">Users</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Products</a>
        </li>
    </ul>
</nav>
</code>

Les liens sont alignés à droite de la barre. Pour les repousser vers la gauche (près du Brand), il faut ajouter la classe **mr-auto** à l'élément **UL**. Cette classe ajoute une marge automatique à droite, tandis que **ml-auto** ajouter une marge automatique à gauche.

<code html>
<nav class="navbar navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a href="#" class="nav-link">Users</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">Products</a>
        </li>
    </ul>
</nav>
</code>

La navbar affiche actuellement les liens les uns au-dessus des autres, plutôt que les uns à côté des autres. C'est parce que la navbar n'est pas encore "//collapsible//".

Entourer la liste de liens d'une **DIV** ayant les classes **collapse** et **navbar-collapse** :

<code html>
<nav class="navbar navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
    </div>
</nav>
</code>

Actuellement la navbar n'affiche plus les liens. Ajouter une classe **navbar-expand-{sm|md|lg|xl}** à l'élément **NAV** :

<code html>
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
    </div>
</nav>
</code>

Les liens apparaîtront sur une taille d'écran supérieure ou égale à **576px (sm)**, à **768px (md)**, à **992px (lg)** ou à **1200px (xl)**.

De plus ils sont maintenant affichés en ligne (les uns à côté des autres).

Maintenant les liens apparaissent lorsque l'écran dépasse une certaine largeur. Lorsqu'il est plus petit, les liens n'apparaissent pas. À la place nous allons ajouter un bouton de menu (de type //hamburger//).

Cela se traduit par un élément **BUTTON** portant la classe **navbar-toggler** et contenant un élément **SPAN** portant la classe **navbar-toggler-icon** :

<code html>
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
    </div>
</nav>
</code>

Pour le moment le bouton ne fait rien. Il faut encore lui ajouter une action (**data-toggle**) et une cible (**data-target**). La cible en question est un sélecteur CSS, en l'occurence l'**id** de l'élément **DIV** :

<code html>
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a href="#" class="navbar-brand">NomDuSite</a>
    <button class="navbar-toggler"
        data-toggle="collapse" data-target="#monMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="monMenu">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Users</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Products</a>
            </li>
        </ul>
    </div>
</nav>
</code>

===== Sous-menu déroulant =====

Un élément du menu horizontal peut avoir des sous-éléments affichés verticalement.

Pour cela il suffit de lui ajouter la classe **dropdown** et son contenu doit être
structuré comme suit :

<code html>
<li class="nav-item dropdown">

    <!-- Élément déroulant -->
    <a class="nav-link dropdown-toggle"
       href="#"
       id="mnuArticles"
       role="button"
       data-toggle="dropdown"
       aria-haspopup="true"
       aria-expanded="false">Articles</a>

    <!-- Sous-éléments -->
    <div class="dropdown-menu" aria-labelledby"mnuArticles">
        <a href="#" class="dropdown-item">Option 1</a>
        <a href="#" class="dropdown-item">Option 2</a>
        <a href="#" class="dropdown-item">Option 3</a>
    </div>

</li>
</code>
Cramnurbel

Outils pour utilisateurs

Outils du site

Outils de la page
