Menu

Options

Classe Elément Niveau Description
.nav <ul> Parent Créer un menu
.navAccordion <ul> Parent Créer un menu dont les sous-menus sont fermés. Un seul sous-menu peut être affiché.
.navAccordionOpen <ul> Parent Créer un menu dont les sous-menus sont ouvert. Tous les sous-menus peuvent être affichés.
.textS
.textL
<ul> Parent Modifier la hauteur des liens.
.darken
.lighten
<ul> Parent Modifier l'opacité au survol des liens.
.active <ul> Enfant Afficher par défaut un sous-menu d'un menu .navAccordion.

Les menus permettent notament d'avoir des liens occupant 100% de la largeur du conteneur.

Exemples

Nav

<ul class="nav">
    <li><a href="#">Lien 1</a></li>
    <li>
        <p>Sous Menu 1</p>
        <ul>
            <li><a href="#"><i class="icon" data-icon="fal/trash"></i> Lien 1</a></li>
            <li><a href="#"><i class="icon" data-icon="fal/cog"></i> Lien 2</a></li>
        </ul>
    </li>
    <li>
        <p>Sous Menu 2</p>
        <ul>
            <li><a href="#">Lien 1</a></li>
            <li><a href="#">Lien 2</a></li>
        </ul>
    </li>
    <li><a href="#">Lien2</a></li>
    <li><a href="#">Lien3</a></li>
    <hr>
    <li><a href="#">Lien4</a></li>
</ul>

NavAccordion

<ul class="navAccordion textS darken">
    <li><a href="#">Lien 1</a></li>
    <li>
        <p>Sous Menu 1</p>
        <ul>
            <li><a href="#"><i class="icon" data-icon="fal/trash"></i> Lien 1</a></li>
            <li><a href="#"><i class="icon" data-icon="fal/cog"></i> Lien 2</a></li>
        </ul>
    </li>
    <li>
        <p>Sous Menu 2</p>
        <ul class="active">
            <li><a href="#">Lien 1</a></li>
            <li><a href="#">Lien 2</a></li>
        </ul>
    </li>
    <li>
        <p>Sous Menu 3</p>
        <ul>
            <li><a href="#">Lien 1</a></li>
            <li><a href="#">Lien 2</a></li>
        </ul>
    </li>
    <li><a href="#">Lien2</a></li>
    <li><a href="#">Lien3</a></li>
    <hr>
    <li><a href="#">Lien4</a></li>
</ul>

NavAccordionOpen

<ul class="navAccordionOpen textL bgColor1 light">
    <li><a href="#">Lien 1</a></li>
    <li>
        <p>Sous Menu 1</p>
        <ul>
            <li><a href="#"><i class="icon" data-icon="fal/trash"></i> Lien 1</a></li>
            <li><a href="#"><i class="icon" data-icon="fal/cog"></i> Lien 2</a></li>
        </ul>
    </li>
    <li>
        <p>Sous Menu 2</p>
        <ul>
            <li><a href="#">Lien 1</a></li>
            <li><a href="#">Lien 2</a></li>
        </ul>
    </li>
    <li><a href="#">Lien2</a></li>
    <li><a href="#">Lien3</a></li>
    <hr>
    <li><a href="#">Lien4</a></li>
</ul>