Menu responsive avec foundation

7 October 2016

Depuis la version 6 du framework SASS/CSS Foundation, le composant qui sert à créer le menu principal du site, à savoir la “top bar” n’est plus un menu responsif “out of the box”.

C’est à vous d’en construire un avec les composants, comme l’explique la documentation.

Voici une structure html qui devrait couvrir la majorité des besoins. N’ont pas que c’est bien compliqué à réaliser, mais j’en ai marre de la refaire encore et toujours.

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
    <div class="top-bar-left">
        <ul class="vertical medium-horizontal menu dropdown" data-responsive-menu="drilldown medium-dropdown" data-parent-link="true">
            <li>
                <a href="#">Lien</a>
                <ul class="menu vertical">
                    <li>
                        <a href="">Lien</a>
                        <ul class="menu vertical">
                            <li>
                                <a href="">Lien</a>
                            </li>
                            <li>
                                <a href="">Lien</a>
                            </li>
                            <li>
                                <a href="">Lien</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="">Lien</a>
                    </li>
                    <li>
                        <a href="">Lien</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Lien</a></li>
            <li><a href="#">Lien</a></li>
            <li><a href="#">Lien</a></li>
            <li><a href="#">Lien</a></li>
            <li><a href="#">Lien</a></li>
        </ul>
    </div>
</div>