Barre latérale qui ne recouvre pas la barre de menu.
Une barre latérale doit être inséré avant l'élément section.
| Classe | Description |
|---|---|
.sidebarLeft.sidebarRight
|
Créer une barre latérale uniquement visible lors d'un clique sur un élément. |
.sidebarLeft[XS, S, M, L, XL].sidebarRight[XS, S, M, L, XL]
|
Créer une barre latérale visible suivant le résolution de l'écran. |
.openSidebar |
Afficher la barre latérale renseigné dans l'attribut data-target. |
<i class='closeSidebar' data-icon='fal/times'></i> |
Créer une icone de fermeture. Doit être le premier enfant de la barre latérale. |
.closeSidebar |
Fermer la barre latérale parent de l'élément. |
Pour une barre latérale responsive (sidebarRight[XS, S, M, L, XL]), les éléments de fermeture seront cachés ou visible suivant la résolution de l'écran.
<div id="mySidebar" class="sidebarLeft">
<i class="closeSidebar" data-icon="fal/times"></i>
{...}
</div>
<section>
{...}
<button class="openSidebar" data-target="myModal">Open sidebar</button>
{...}
</section>Barre latérale qui recouvre la barre de menu.
Une barre latérale pleine peut être inséré avant ou après l'élément section.
| Classe | Description |
|---|---|
.fullSidebarLeft.fullSidebarRight
|
Créer une barre latérale pleine. |
.openFullSidebar |
Afficher une barre latérale pleine renseigné dans l'attribut data-target. |
<i class='closeFullSidebar' data-icon='fal/times'></i> |
Créer une icone de fermeture. Doit être le premier enfant de la barre latérale pleine. |
.closeFullSidebar |
Fermer la barre latérale pleine parent de l'élément. |
<div id="myFullSidebar01" class="fullSidebarLeft">
<i class="closeSidebar" data-icon="fal/times"></i>
{...}
</div>
<section>
{...}
<button class="openFullSidebar" data-target="myFullSidebar01">Open full sidebar 01</button>
<button class="openFullSidebar" data-target="myFullSidebar02">Open full sidebar 02</button>
{...}
</section>
<div id="myFullSidebar02" class="fullSidebarRight">
<i class="closeFullSidebar" data-icon="fal/times""></i>
{...}
</div>