Foundation 6 permet de switcher facilement d’un type de menu à un autre par le biais de son composant Responsive Navigation. L’intérêt de se composant réside notamment dans le fait qu’on utilise le même code pour afficher son menu sur les supports Mobile/Desktop (il arrive souvent qu’un menu soit doublé pour ce type de besoin).

Cependant, Foundation 6 ne couvre pas l’ensemble des menus existants et il peut arriver qu’on ait besoin d’utiliser un menu Foundation pour une vue donnée, et qu’on soit obligé de développer un menu full-custom (un mega-menu dans notre cas) pour une autre vue.

Dans notre exemple, nous aurons un Drilldown en vue Mobile et un mega-menu en vue Desktop. Nous n’allons pas utiliser le composant Responsive Navigation, mais uniquement le Drilldown (voir lien plus haut) et exploiter les possibilités offertes par l’util Media Queries de Foundation 6.

L’astuce consiste à:

  • Désactiver les inclusions de « foundation-menu » et « foundation-drilldown-menu » dans le mixin « foundation-everything ». On ne va pas inclure ces mixins de manière globale, mais seulement lorsqu’on en a besoin.

  • Englober le markup HTML de notre menu dans une <div class="menu-corporate"></div> et lancer les inclusions de « foundation-menu » et « foundation-drilldown-menu » depuis cette classe…

  • …et ce en fonction d’un breakpoint (ce qui nous permettra de dire: « je veux mon menu Drilldown pour mon .menu-corporate et le breakpoint medium down uniquement.

    ATTENTION: j’en ai chié avec ça, mais il faut s’assurer que la méthode _destroy ne soit déclenchée que si le markup du menu Drilldown est actif. Déclencher le destroy une première fois en vue Desktop va bien supprimer le markup du Drilldown, mais le déclencher une seconde fois va supprimer le markup nécessaire au off-canvas (<div class="off-canvas in-canvas-for-large position-left" id="headerMainNav" data-off-canvas>) !!!

Notez que c’est la fonctionnalité nested-off-canvas qui nous offre la possibilité d’utiliser le même code pour afficher son menu sur les supports Mobile/Desktop.

Markup HTML

Code SASS

Code jQuery