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-corporateet le breakpointmedium downuniquement.ATTENTION: j’en ai chié avec ça, mais il faut s’assurer que la méthode
_destroyne 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>) !!!1234567891011121314/** Drilldown menu (Mobile)*/function buildDrilldownMenuCorporate(){new Foundation.Drilldown($menuCorporate);}function destroyDrilldownMenuCorporate(){// Trigger _destroy event ONLY if Drilldown existsif($('.menu-corporate .is-drilldown').length == 1) {$menuCorporate.foundation('_destroy');}}// end: Drilldown menu (Mobile)
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<button type="button" class="button hide-for-medium" data-toggle="headerMainNav"> headerMainNav </button> <div class="menu-corporate"> <div class="off-canvas in-canvas-for-large position-left" id="headerMainNav" data-off-canvas> <ul id="menu-corporate" class="vertical menu drilldown level0" data-drilldown> <li class="section0"><a href="#">Entreprises</a> <ul class="vertical menu nested level1 menu-corporate-hidden"> <li class="section0"> <a href="#">Nos solutions selon votre taille</a> <ul class="vertical menu nested level2"> <li><a href="#">TPE</a></li> <li><a href="#">PME-PMI-ETI</a></li> <li><a href="#">Grands comptes</a></li> <li><a href="#">TNS indépendants</a></li> <li><a href="#">Cabinets comptables</a></li> <li><a href="#">Comités d'entreprises</a></li> <li><a href="#">Associations</a></li> </ul> </li> <li class="section1"> <a href="#">Nos solutions selon votre métier</a> <ul class="vertical menu nested level2"> <li><a href="#">Complémentaire santé collective</a></li> <li><a href="#">Prévoyance collective</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">dolor</a></li> <li><a href="#">sit amet ...</a></li> </ul> </li> <li class="section2"> <a href="#">Nos solutions selon vos besoins</a> <ul class="vertical menu nested level2"> <li><a href="#">Complémentaire santé collective</a></li> <li><a href="#">Prévoyance collective</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">dolor</a></li> <li><a href="#">sit amet ...</a></li> <li><a href="#">Lorem ipsum dolor sit amet ...</a></li> <li><a href="#">Toto</a></li> </ul> </li> </ul> </li> <li class="section1"><a href="#">Particuliers</a> <ul class="vertical menu nested level1 menu-corporate-hidden"> <li class="section0"> <a href="#">Complémentaire santé</a> <ul class="vertical menu nested level2"> <li><a href="#">Célibataire ou jeune couple</a></li> <li><a href="#">Maternité</a></li> <li><a href="#">Famille</a></li> <li><a href="#">50 ans et +</a></li> <li><a href="#">Frontalier</a></li> <li><a href="#">Surcomplémentaire</a></li> </ul> </li> <li class="section1"> <a href="#">Epargne - Retraite</a> <ul class="vertical menu nested level2"> <li><a href="#">Fiscalité des produits</a></li> <li><a href="#">Préparation retraite</a></li> <li><a href="#">Faire fructifier son épargne</a></li> <li><a href="#">Compléter ses revenus</a></li> <li><a href="#">Transmission de patrimoine</a></li> <li><a href="#">Assurance vie</a></li> </ul> </li> <li class="section2"> <a href="#">Prévoyance - Dépendance</a> <ul class="vertical menu nested level2"> <li><a href="#">Complémentaire santé collective</a></li> <li><a href="#">Prévoyance collective</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">dolor</a></li> <li><a href="#">sit amet ...</a></li> <li><a href="#">Lorem ipsum dolor sit amet ...</a></li> <li><a href="#">Toto</a></li> </ul> </li> <li class="section3"> <a href="#">Accédez à nos solutions selon votre situation</a> <ul class="vertical menu nested level2"> <li><a href="#">Complémentaire santé collective</a></li> <li><a href="#">Prévoyance collective</a></li> <li><a href="#">Lorem ipsum</a></li> <li><a href="#">dolor</a></li> <li><a href="#">sit amet ...</a></li> <li><a href="#">Lorem ipsum dolor sit amet ...</a></li> <li><a href="#">Toto</a></li> </ul> </li> </ul> </li> <li class="section2"><a href="#">Groupe</a> <ul class="vertical menu nested level1 menu-corporate-hidden"> <li class="section0"> <a href="#">A propos de nous</a> <ul class="vertical menu nested level2"> <li><a href="#">Notre métier</a></li> <li><a href="#">Secteurs d'expertise</a></li> <li><a href="#">Partenaires</a></li> <li><a href="#">Certifications et démarche qualité</a></li> <li><a href="#">Nos implantations</a></li> <li><a href="#">Réseau international</a></li> <li><a href="#">Actualités</a></li> <li><a href="#">Ressources humaines</a></li> </ul> </li> <li class="section1"> <a href="#">Pour nous contacter</a> <ul class="vertical menu nested level2"> <li><a href="#">Support</a></li> <li><a href="#">Réclamations</a></li> <li><a href="#">Suggestions</a></li> <li><a href="#">Contact</a></li> </ul> </li> </ul> </li> </ul> </div> </div> |
Code SASS
|
1 2 3 4 5 6 7 8 9 |
// Dans le mixin "foundation-everything" (extrait), on COMMENTE les inclusions de "foundation-menu" et "foundation-drilldown-menu". // Il faudra les appeler au cas par cas (voir juste en dessous). @mixin foundation-everything( $flex: false, $prototype: false ) { // @include foundation-menu; // @include foundation-drilldown-menu; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
// @include breakpoint(medium down) { .menu-corporate { @include foundation-menu; @include foundation-drilldown-menu; } } @include breakpoint(large) { // ici code pour mon mega menu full-custom qui n'hérite d'aucun style de "foundation-menu" et "foundation-drilldown-menu". .menu-corporate { // core &-outer { width: 100%; height: 100%; position: fixed; z-index: 1; top: 0; left: 0; background: navy; } &-hidden { display: none !important; } .menu { > li { z-index: 2; } } // skin .menu { // reset margin: 0; padding: 0; list-style-type: none; } .level0 { position: relative; @include flex-grid-row( $behavior: collapse); @include flex-align( $x: center, $y: stretch); > li { @include flex-grid-column( $columns: shrink, $gutters: 0); > a { line-height: 1; text-decoration: none; white-space: nowrap; display: block; padding: $menu-items-padding; background: pink; } } } .level1 { position: absolute; left: 0; @include flex-grid-row( $behavior: collapse); margin-left: 0; margin-right: 0; background: tomato; } .level2 {} [class*="section"] { border: 1px solid #000; } .section0 { .section0, .section1 { @include flex-grid-column( $columns: 6, $gutters: 0); } .section2 { @include flex-grid-column( $columns: 12, $gutters: 0); } } .section1 { .section0, .section1, .section2 { @include flex-grid-column( $columns: 4, $gutters: 0); } .section3 { @include flex-grid-column( $columns: 12, $gutters: 0); } } .section2 { .section0, .section1 { @include flex-grid-column( $columns: 6, $gutters: 0); } } } } |
Code jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
/* * Global variables */ var bpMobile = ['small', 'medium']; var bpDesktop = ['large', 'xlarge', 'xxlarge']; /* * Corporate menu * - mobile: Foundation 6 Drilldown; * - desktop: custom Dropdown (mega menu) */ var $menuCorporate = $('#menu-corporate'); // On page load, if Mobile if($.inArray(Foundation.MediaQuery.current, bpMobile) != -1) { buildDrilldownMenuCorporate(); } // On page load, if Desktop else if($.inArray(Foundation.MediaQuery.current, bpDesktop) != -1) { destroyDrilldownMenuCorporate(); $('.menu-corporate .level0 > li[class*="section"]').on('mouseenter', openMegaMenuCorporate); $(document).on('mouseover','.menu-corporate-outer', closeMegaMenuCorporate); } $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) { // if enters any Mobile if(newSize == 'small' || newSize == 'medium') { $('.menu-corporate .level0 > li[class*="section"]').on('mouseenter', closeMegaMenuCorporate); buildDrilldownMenuCorporate(); } // if enters any Desktop else if(newSize == 'large' || newSize == 'xlarge' || newSize == 'xxlarge') { destroyDrilldownMenuCorporate(); $('.menu-corporate .level0 > li[class*="section"]').on('mouseenter', openMegaMenuCorporate); $(document).on('mouseover','.menu-corporate-outer', closeMegaMenuCorporate); } }); /* * Drilldown menu (Mobile) */ function buildDrilldownMenuCorporate(){ new Foundation.Drilldown($menuCorporate); } function destroyDrilldownMenuCorporate(){ // Trigger _destroy event ONLY if Drilldown exists if($('.menu-corporate .is-drilldown').length == 1) { $menuCorporate.foundation('_destroy'); } } // end: Drilldown menu (Mobile) /* * Mega menu (Desktop) */ function openMegaMenuCorporate() { var $this = $(this); if($('.menu-corporate-outer').length <= 0){ $('<div class="menu-corporate-outer" />').insertBefore('.menu-corporate'); } $('.level1:not(.menu-corporate-hidden)').addClass('menu-corporate-hidden').removeAttr('style'); if(!$this.hasClass('in-path')){ $this.addClass('in-path').siblings('li[class*="section"]').removeClass('in-path'); $('.menu-corporate .level1').find('li[class*="section"]').removeClass('in-path'); } $this.children('.menu-corporate .level1').removeClass('menu-corporate-hidden'); // Center-align sublevel function centerAlignSubLevel() { var hoveredElementPosition = $this.position().left; var hoveredElementWidth = $this.width(); var activeSubLevelWidth = $this.children('.level1').width(); var hoveredElementMiddlePosition = hoveredElementPosition + (hoveredElementWidth / 2); $this.children('.menu-corporate .level1').css('left', hoveredElementMiddlePosition - (activeSubLevelWidth / 2)); } centerAlignSubLevel(); $(window).on('resize', centerAlignSubLevel()); } function closeMegaMenuCorporate() { $('.menu-corporate .level1').removeAttr('style'); $('.menu-corporate .level1:not(.menu-corporate-hidden)').addClass('menu-corporate-hidden'); $('.menu-corporate li[class*="section"]').removeClass('in-path'); $('.menu-corporate-outer').detach(); } // end: Mega menu (Desktop) // end: Corporate menu |