Barres latérales

Sidebar

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.

Exemple

Code

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

FullSidebar

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.

Exemples

Code

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut orci sed massa elementum semper id vitae nunc. Curabitur blandit tempus lacus, eu scelerisque mauris blandit nec. Proin eu convallis neque. Donec sed sem dui. Maecenas ut pellentesque eros. Curabitur nunc ligula, dignissim et lobortis et, tristique quis eros. Suspendisse rhoncus est in felis dapibus bibendum. Etiam libero magna, molestie quis orci vel, aliquet pulvinar ipsum. Aenean id elit quis enim hendrerit aliquet. Phasellus tempus risus risus, a condimentum turpis lobortis eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut orci sed massa elementum semper id vitae nunc. Curabitur blandit tempus lacus, eu scelerisque mauris blandit nec. Proin eu convallis neque. Donec sed sem dui. Maecenas ut pellentesque eros. Curabitur nunc ligula, dignissim et lobortis et, tristique quis eros. Suspendisse rhoncus est in felis dapibus bibendum. Etiam libero magna, molestie quis orci vel, aliquet pulvinar ipsum. Aenean id elit quis enim hendrerit aliquet. Phasellus tempus risus risus, a condimentum turpis lobortis eget.

Barre latérale gauche