Dropdown

Css

Classe Elément Niveau Description
.dropdown <div> Parent Créer un menu déroulant.
<p>
<a>
<button>
1er enfant Bouton du menu déroulant.
.nav
.navAccordion
.navAccordionOpen
<ul> 2ème enfant Intégrer un menu.
<div> 2ème enfant Intégrer du contenu.

Si le la div du dropdown à une classe contenant "container", ce dernier sera automatiquement centré.

Position

Le menu déroulant se positionnera à droite du bouton par défault, à gauche s'il n'y a pas la place à droite et au centre s'il n'y a pas la place à droite et à gauche.

Si la largeur du menu déroulant est supérieur à la largeur de la fenêtre/section, le menu déroulant sera redimensionnée.

Le menu déroulant se positionnera en bas du bouton par défault et en haut s'il n'y a pas l'espace suffisant en bas du bouton et qu'il y a la place suffisante en haut du bouton.

Exemples

Exemple 1

<div class="dropdown">
    <button>Nav</button>
    <ul class="nav">
        <li><a href="#">Lien 1</a></li>
        <li>
            <p>Sous Menu 1</p>
            <ul>
                <li><a href="#"><i class="baseline" data-icon="fal/trash"></i> Lien 1</a></li>
                <li><a href="#"><i class="baseline" 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>
</div>

Exemple 2

<div class="dropdown">
    <button>Content</button>
    <div class="widthM">
        <div class="grid6">
            <div><p>cdecfdecds</p></div>
            <div><p>cdecfdecds</p></div>
        </div>
    </div>
</div>

Exemple 3

<div class="dropdown">
    <button>Content</button>
    <div class="width100vw">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>

    </div>
</div>

Exemple 4

<div class="dropdown">
            <button>Content</button>
            <div class="width50vw container">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a felis et lacus tempus posuere. Maecenas sapien tellus, faucibus nec elit non, convallis fermentum mauris. Aenean feugiat erat et aliquam fringilla. Aliquam erat volutpat. Sed sit amet tortor ligula.</p>

            </div>
        </div>