Étiquette : drilldown

[Foundation 6] Exploiter le composant Drilldown et jQuery pour créer un product finder wizard

08/04/2020 / admin

Un product finder wizard qui pose une série de questions pour aider l’utilisateur à trouver le bon produit en fonction de ses besoins. La fonctionnalité est constituée de:

le Drilldown de Foundation 6 pour la mise en place du wizard <ul class="vertical menu drilldown product-finder-tree">
des boutons de navigation Précédent, Réinitialiser et Suivant <div class="product-finder-actions">
un fil d’Ariane qui se constitue à la volée en fonction des choix précédents de l’utilisateur <div id="productFinderBreadcrumb" class="product-finder-breadcrumb"></div>

Partie PHTML

Le code HTML qui constitue le menu n’est autre qu’une liste non-ordonnée d’éléments imbriqués. Il est conforme au markup générique fourni par Zurb pour la démo du composant Drilldown aux exceptions près que:

les éléments <a> portent une classe .question
les éléments <li> ont un ID questionID_ (généré via PHP dans notre exemple)

<?php
/** @var  \Vital\OptiChoix\Block\Index $block */

$tree = $block->getTree();

function displayLeaf($question) {
    ?>
    <li class="optioignons-leaf" id="questionID_<?=$question["id"];?>" data-category-id="<?=$question["id"];?>">
        <a class="question" href="#">
            <?=$question["label"];?>
        </a>
        <ul>
            <li>
                <div id="optioignos-product-list-<?=$question["id"];?>"></div>
            </li>
        </ul>
    </li>
    <?php
}

function displayQuestion($question) {
    if (!$question['children']) {
        displayLeaf($question);
        return;
    }
    ?>
    <li id="questionID_<?=$question["id"];?>">
        <a class="question" href="#">
            <?=$question["label"];?>
        </a>
        <?php if(count($question["children"])): ?>
            <ul id="<?=$question["id"];?>">
                <?php foreach ($question["children"] as $child): displayQuestion($child); endforeach; ?>
            </ul>
        <?php endif; ?>
    </li>
    <?php
}

?>
<h2>Contenu des catégories et sous catégories</h2>

<div id="productFinderBreadcrumb" class="product-finder-breadcrumb"></div>

<div class="product-finder-actions">
    <button id="productFinderActionPrevious" class="primary" role="button" disabled>Précédent</button>
    <button id="productFinderActionReset" class="primary" role="button" disabled>Résumer</button>
    <button id="productFinderActionNext" class="primary" role="button" disabled>Suivant</button>
</div>

<nav id="productFinder" class="product-finder">
    <ul class="vertical menu drilldown product-finder-tree">
        <?php displayQuestion($tree); ?>
    </ul>
</nav>

<?php

/** @var \Vital\OptiChoix\Block\Index $block */

$tree = $block->getTree();

function displayLeaf($question) {

<li class="optioignons-leaf" id="questionID_<?=$question["id"];?>" data-category-id="<?=$question["id"];?>">

<?=$question["label"];?>

</a>

<ul>

<li>

</li>

</ul>

</li>

<?php

}

function displayQuestion($question) {

if (!$question['children']) {

displayLeaf($question);

return;

}

<?=$question["label"];?>

</a>

<?php if(count($question["children"])): ?>

<?php foreach ($question["children"] as $child): displayQuestion($child); endforeach; ?>

</ul>

<?php endif; ?>

</li>

<?php

}

<h2>Contenu des catégories et sous catégories</h2>

<button id="productFinderActionPrevious" class="primary" role="button" disabled>Précédent</button>

<button id="productFinderActionReset" class="primary" role="button" disabled>Résumer</button>

<button id="productFinderActionNext" class="primary" role="button" disabled>Suivant</button>

</div>

<?php displayQuestion($tree); ?>

</ul>

</nav>

Partie jQuery

Nous utilisons plusieurs méthodes natives du composant Drilldown de Foundation 6:

_hideAll pour réinitialiser le menu à son état initial.

Attention: cette méthode semble bugguée. Je l’ai peut-être aussi mal exploitée, mais j’ai dû écrire un fix; voir ci-dessous:

$productFinder.foundation('_hideAll');

// FIX d'un bug du composant Drilldown de Foundation:
// à l'utilisation de la méthode _hideAll, les aria-expanded restent à true
$('[aria-expanded="true"]', $productFinder).each(function(){
    $(this).attr('aria-expanded', false);
});

$productFinder.foundation('_hideAll');

// FIX d'un bug du composant Drilldown de Foundation:

// à l'utilisation de la méthode _hideAll, les aria-expanded restent à true

$('[aria-expanded="true"]', $productFinder).each(function(){

$(this).attr('aria-expanded', false);

});

_showMenu pour rediriger l’utilisateur vers un choix précédent dans le DOM du menu (lorsqu’il clique sur le bouton Précédent).

Attention: il est important de pointer un élément UL (dans mon exemple, sur la classe .submenu) pour que cette méthode fonctionne!

$productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);

1

$productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);
_show pour rediriger l’utilisateur plus en avant dans ses choix dans le DOM du menu (lorsqu’il clique sur le bouton Suivant).

Attention: il est important de pointer un élément LI (dans mon exemple, sur l’ID questionID_ se trouvant sur les LI) pour que cette méthode fonctionne!

$productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

1

$productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

<script type="text/javascript">
    require([
        "jquery",
        "foundation",
        "domReady!"
    ], function ($, Foundation) {
        'use strict';

        $(".optichoix-leaf").on("click", function () {
            optiChoixLoadProducts(this.getAttribute("data-category-id"));
        });
        function optiChoixLoadProducts (id) {
            $("#optichoix-product-list-"+id).load(
                "/expertise/productlist",
                "categoryId=" + id
            );
        }

        // Product Finder
        // https://get.foundation/sites/docs/drilldown-menu.html

        let $productFinder = $("#productFinder"),
            $productFinderDrilldown = new Foundation.Drilldown($productFinder),
            $productFinderBreadcrumb = $('#productFinderBreadcrumb'),
            $productFinderActionPrevious = $('#productFinderActionPrevious'),
            $productFinderActionReset = $('#productFinderActionReset'),
            $productFinderActionNext = $('#productFinderActionNext'),
            navHistory = [],
            currentPositionInNavHistory = -1; // "-1" car avec "0" (valeur du 1er index dans un array), nous aurions déjà répondu à une 1ère question

        // On réinitialise la totale
        function resetAll(){
            // On referme le menu
            $productFinder.foundation('_hideAll');

            // FIX d'un bug du composant Drilldown de Foundation:
            // à l'utilisation de la méthode _hideAll, les aria-expanded restent à true
            $('[aria-expanded="true"]', $productFinder).each(function(){
                $(this).attr('aria-expanded', false);
            });

            // On désactive les boutons Previous, Reset et Next
            $productFinderActionPrevious.prop('disabled', true);
            $productFinderActionReset.prop('disabled', true);
            $productFinderActionNext.prop('disabled', true);

            // On réinitialise l'historique de navigation
            navHistory = [];

            // On réinitialise la position courante dans l'historique de navigation
            currentPositionInNavHistory = -1;

            // On met à jour le breadcrumb
            updateBreadcrumb();
        }

        // On génère le breadcrumb
        function updateBreadcrumb(){
            $productFinderBreadcrumb.empty();
            $('[aria-expanded="true"]', $productFinder).each(function(){
                $('<p class="product-finder-breadcrumb-element">'+$(this).attr('aria-label')+'</p>').appendTo($productFinderBreadcrumb);
            });
        }

        // Au clic sur un choix proposé dans l'arbre des questions
        $('.product-finder-tree', $productFinder).on('click', '.question', function(){
            let $this = $(this);
            let $closestExpanded = $this.closest('[aria-expanded="true"]');

            // On pousse l'ID de la question cliquée dans le tableau navHistory
            navHistory.push({
               questionID: $closestExpanded.attr('id')
            });

            // On met à jour la position courante dans l'historique de navigation
            currentPositionInNavHistory = navHistory.length -1;

            // On met à jour le breadcrumb
            updateBreadcrumb();

            // On active les boutons Previous et Reset
            $productFinderActionPrevious.prop('disabled', false);
            $productFinderActionReset.prop('disabled', false);
        });

        // Au clic sur Reset button
        // ...on invoque la fonction resetAll
        $productFinderActionReset.on('click', resetAll);

        // Au clic sur Previous button
        $productFinderActionPrevious.on('click', function(){
            // On récupère l'ID de la question correspondant à la currentPositionInNavHistory dans le tableau navHistory
            let currentPositionInNavHistoryQuestionID = $('#'+navHistory[currentPositionInNavHistory].questionID);

            // On met à jour le menu
            // (dans le DOM, on remonte d'un cran dans l'arbre des questions)
            let $theTargetSubMenuUlTag = currentPositionInNavHistoryQuestionID.closest('.submenu');
            $productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);

            // -1 sur la valeur de currentPositionInNavHistory
            currentPositionInNavHistory = currentPositionInNavHistory -1;

            // Si la valeur de la position précédente est "-1", on réinitialise tout
            if(currentPositionInNavHistory == "-1"){
                resetAll();
            // Sinon...
            } else {
                // On met à jour le breadcrumb
                updateBreadcrumb();

                // On active le bouton Next
                $productFinderActionNext.prop('disabled', false);
            }
        });

        // Au clic sur Next button
        $productFinderActionNext.on('click', function(){
            // +1 sur la valeur de currentPositionInNavHistory
            currentPositionInNavHistory = currentPositionInNavHistory +1;

            // On met à jour le menu
            // (dans le DOM, on descend d'un cran dans l'arbre des questions)
            let $theCurrentElementWithASubmenuToOpen = $('#'+navHistory[currentPositionInNavHistory].questionID);
            $productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

            // On met à jour le breadcrumb
            updateBreadcrumb();

            // Si la valeur de la position suivante correspond au dernier index du tableau navHistory
            // (l'utilisateur n'est jamais allé plus loin dans l'arbre des questions)
            let navHistoryLastIndex = navHistory.length -1;

            if(navHistoryLastIndex == currentPositionInNavHistory){
                // On désactive le button Next
                $productFinderActionNext.prop('disabled', true);
            } else {
                // Nada...
                return false;
            }
        });

    })
</script>

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

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

require([

"jquery",

"foundation",

"domReady!"

], function ($, Foundation) {

'use strict';

$(".optichoix-leaf").on("click", function () {

optiChoixLoadProducts(this.getAttribute("data-category-id"));

});

function optiChoixLoadProducts (id) {

$("#optichoix-product-list-"+id).load(

"/expertise/productlist",

"categoryId=" + id

);

}

// Product Finder

// https://get.foundation/sites/docs/drilldown-menu.html

let $productFinder = $("#productFinder"),

$productFinderDrilldown = new Foundation.Drilldown($productFinder),

$productFinderBreadcrumb = $('#productFinderBreadcrumb'),

$productFinderActionPrevious = $('#productFinderActionPrevious'),

$productFinderActionReset = $('#productFinderActionReset'),

$productFinderActionNext = $('#productFinderActionNext'),

navHistory = [],

currentPositionInNavHistory = -1; // "-1" car avec "0" (valeur du 1er index dans un array), nous aurions déjà répondu à une 1ère question

// On réinitialise la totale

function resetAll(){

// On referme le menu

$productFinder.foundation('_hideAll');

// FIX d'un bug du composant Drilldown de Foundation:

// à l'utilisation de la méthode _hideAll, les aria-expanded restent à true

$('[aria-expanded="true"]', $productFinder).each(function(){

$(this).attr('aria-expanded', false);

});

// On désactive les boutons Previous, Reset et Next

$productFinderActionPrevious.prop('disabled', true);

$productFinderActionReset.prop('disabled', true);

$productFinderActionNext.prop('disabled', true);

// On réinitialise l'historique de navigation

navHistory = [];

// On réinitialise la position courante dans l'historique de navigation

currentPositionInNavHistory = -1;

// On met à jour le breadcrumb

updateBreadcrumb();

}

// On génère le breadcrumb

function updateBreadcrumb(){

$productFinderBreadcrumb.empty();

$('[aria-expanded="true"]', $productFinder).each(function(){

$('<p class="product-finder-breadcrumb-element">'+$(this).attr('aria-label')+'</p>').appendTo($productFinderBreadcrumb);

});

}

// Au clic sur un choix proposé dans l'arbre des questions

$('.product-finder-tree', $productFinder).on('click', '.question', function(){

let $this = $(this);

let $closestExpanded = $this.closest('[aria-expanded="true"]');

// On pousse l'ID de la question cliquée dans le tableau navHistory

navHistory.push({

questionID: $closestExpanded.attr('id')

});

// On met à jour la position courante dans l'historique de navigation

currentPositionInNavHistory = navHistory.length -1;

// On met à jour le breadcrumb

updateBreadcrumb();

// On active les boutons Previous et Reset

$productFinderActionPrevious.prop('disabled', false);

$productFinderActionReset.prop('disabled', false);

});

// Au clic sur Reset button

// ...on invoque la fonction resetAll

$productFinderActionReset.on('click', resetAll);

// Au clic sur Previous button

$productFinderActionPrevious.on('click', function(){

// On récupère l'ID de la question correspondant à la currentPositionInNavHistory dans le tableau navHistory

let currentPositionInNavHistoryQuestionID = $('#'+navHistory[currentPositionInNavHistory].questionID);

// On met à jour le menu

// (dans le DOM, on remonte d'un cran dans l'arbre des questions)

let $theTargetSubMenuUlTag = currentPositionInNavHistoryQuestionID.closest('.submenu');

$productFinder.foundation('_showMenu', $theTargetSubMenuUlTag);

// -1 sur la valeur de currentPositionInNavHistory

currentPositionInNavHistory = currentPositionInNavHistory -1;

// Si la valeur de la position précédente est "-1", on réinitialise tout

if(currentPositionInNavHistory == "-1"){

resetAll();

// Sinon...

} else {

// On met à jour le breadcrumb

updateBreadcrumb();

// On active le bouton Next

$productFinderActionNext.prop('disabled', false);

}

});

// Au clic sur Next button

$productFinderActionNext.on('click', function(){

// +1 sur la valeur de currentPositionInNavHistory

currentPositionInNavHistory = currentPositionInNavHistory +1;

// On met à jour le menu

// (dans le DOM, on descend d'un cran dans l'arbre des questions)

let $theCurrentElementWithASubmenuToOpen = $('#'+navHistory[currentPositionInNavHistory].questionID);

$productFinder.foundation('_show', $theCurrentElementWithASubmenuToOpen);

// On met à jour le breadcrumb

updateBreadcrumb();

// Si la valeur de la position suivante correspond au dernier index du tableau navHistory

// (l'utilisateur n'est jamais allé plus loin dans l'arbre des questions)

let navHistoryLastIndex = navHistory.length -1;

if(navHistoryLastIndex == currentPositionInNavHistory){

// On désactive le button Next

$productFinderActionNext.prop('disabled', true);

} else {

// Nada...

return false;

}

});

})

</script>

[Foundation 6] Un lien parent cliquable qui renvoie vers une page dans le menu Drilldown

07/04/2020 / admin

Source: Foundation 6 Drilldown clickable parent link with sub-menu

HTML

<!--
Demo Header
-->
<div class="row collapse expanded">
  <div class="column">
    <h1 class="text-center">
      <span>Drilldown</span>Click
      <a target="_blank"
         href="https://foundation.zurb.com/sites/docs/drilldown-menu.html">
        { Docs 6.3.1 }
      </a>
    </h1>
  </div>
</div>



<!--
DRILLDOWN MENU TEST
-->
<div class="row demo-text">
  <div class="columns small-12 text-center">
    <p>{ Its now posible click on parent menu items that have a sub menu }</p>
  </div>
</div>

<nav>
  <ul class="vertical menu" data-drilldown data-auto-height="true" data-animate-height="true"
      data-close-on-click="true" data-back-button='<li class="js-drilldown-back"><a tabindex="0">Ok, bring me back!</a></li>'>
    <li class="has-submenu">
      <a href="https://www.google.com" target="_blank">Item 1</a>
      <ul class="vertical menu">
        <li><a href="#item-1A">Item 1A</a></li>
        <li><a href="#Item-1B">Item 2A</a></li>
        <li><a href="#Item-1C">Item 3A</a></li>
      </ul>
    </li>
    <li><a href="#Item-2">Item 2</a></li>
    <li><a href="#Item-3">Item 3</a></li>
    <li><a href="#Item-4">Item 4</a></li>
    <li><a href="#Item-5">Item 5</a></li>
  </ul>
</nav>

<!--

Demo Header

-->

<span>Drilldown</span>Click

<a target="_blank"

href="https://foundation.zurb.com/sites/docs/drilldown-menu.html">

{ Docs 6.3.1 }

</a>

</h1>

</div>

<!--

DRILLDOWN MENU TEST

-->

<p>{ Its now posible click on parent menu items that have a sub menu }</p>

</div>

<nav>

<ul class="vertical menu" data-drilldown data-auto-height="true" data-animate-height="true"

data-close-on-click="true" data-back-button='<li class="js-drilldown-back"><a tabindex="0">Ok, bring me back!</a></li>'>

</ul>

</li>

</ul>

</nav>

CSS

/*** <-- Foundation Palette & Setup --> ***/
$primary: #1779ba;
$secondary: #767676;
$success: #3adb76;
$warning: #ffae00;
$alert: #CC4B35;

$back-col: #ffffff;
$font-col: #666;
$base-font: 16px;


/*** <-- Layout Styles --> ***/
body{
  background: $back-col;
  color: $font-col;
  font-size: $base-font;
}

/*** <-- Demo Header --> ***/
h1{
  margin-bottom: 4rem;
  padding: 1rem;
  text-transform: uppercase;
  font-size: 2em;
  font-weight: 300;
  border-bottom: 1px dashed #e2e2e2;
  span{ color: $primary; }
  a{
    display: block;
    margin-top: .5rem;
    font-weight: normal;
    font-size: .5em;
    text-transform: uppercase;
    color: #888;
    transition: color .4s;
    &:hover{
      color: $primary;
    }
  }
}
.demo-text{
  margin-bottom: 1rem;
}

/*** <-- DRILDOWN CLICKABLE PARENT STYLES --> ***/
nav{
  width: 30rem;
  max-width: 100%;
  margin: 0 auto 4rem;
  background: #333;
  .is-drilldown-submenu {
    background: #333;
  }
  .has-submenu{
    position: relative;
    .parent-lab{
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      a{
        display: inline-block;
        padding: .7rem 1rem;   //same as menu links
        line-height: 1;        //same as menu links
        color: red;
      }
    }
  }
}

/*** <-- Foundation Palette & Setup --> ***/

$primary: #1779ba;

$secondary: #767676;

$success: #3adb76;

$warning: #ffae00;

$alert: #CC4B35;

$back-col: #ffffff;

$font-col: #666;

$base-font: 16px;

/*** <-- Layout Styles --> ***/

body{

background: $back-col;

color: $font-col;

font-size: $base-font;

}

/*** <-- Demo Header --> ***/

h1{

margin-bottom: 4rem;

padding: 1rem;

text-transform: uppercase;

font-size: 2em;

font-weight: 300;

border-bottom: 1px dashed #e2e2e2;

span{ color: $primary; }

display: block;

margin-top: .5rem;

font-weight: normal;

font-size: .5em;

text-transform: uppercase;

color: #888;

transition: color .4s;

&:hover{

color: $primary;

}

.demo-text{

margin-bottom: 1rem;

}

/*** <-- DRILDOWN CLICKABLE PARENT STYLES --> ***/

nav{

width: 30rem;

max-width: 100%;

margin: 0 auto 4rem;

background: #333;

.is-drilldown-submenu {

background: #333;

}

.has-submenu{

position: relative;

.parent-lab{

z-index: 1;

position: absolute;

top: 0;

left: 0;

display: inline-block;

padding: .7rem 1rem; //same as menu links

line-height: 1; //same as menu links

color: red;

}

JS

/**
 * Clickable Parent Link with sub-menu
 *
 * NB: must be placed BEFORE foundation's plugins initialisation.
 */
$('.has-submenu > a').each(function(){
    $(this).clone().prependTo($(this).parent('li')).wrap('<span class="parent-lab"></span>');
});

/**
 * Initialise Foundation's plugins
 */
$(document).foundation();

/**

* Clickable Parent Link with sub-menu

* NB: must be placed BEFORE foundation's plugins initialisation.

$('.has-submenu > a').each(function(){

$(this).clone().prependTo($(this).parent('li')).wrap('<span class="parent-lab"></span>');

});

/**

* Initialise Foundation's plugins

$(document).foundation();

[Magento 2] Un menu de navigation drilldown en mobile avec Foundation 6 à partir du Topmenu.php natif

23/03/2020 / admin

Côté `app/code`, création d’un module Topmenu spécifique

En ligne de commande pour créer et activer un module qui s’appelle Topmenu:

$ n98-magerun2 dev:module:create [Name_Space] [Your_Module]

1	$ n98-magerun2 dev:module:create [Name_Space] [Your_Module]

…puis:

$ n98-magerun2 module:enable [Name_Space]_[Your_Module];

1	$ n98-magerun2 module:enable [Name_Space]_[Your_Module];

Créer un module et étendre le Block `Topmenu.php`

Référence: [Magento 2] Surcharger un Block ou un Model natif.

Les seuls fichiers à conserver après la création du module sont (depuis app/code/<MyNamespace>/Topmenu/):

/Block/Html/Topmenu.php (qu’on va créer juste après)
/etc/di.xml
/etc/module.xml
/registration.php

Modifier `app/code/<MyNamespace>/Topmenu/etc/di.xml`:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Theme\Block\Html\Topmenu" type="<MyNamespace>\Topmenu\Block\Html\Topmenu" />
</config>

<?xml version="1.0"?>

<preference for="Magento\Theme\Block\Html\Topmenu" type="<MyNamespace>\Topmenu\Block\Html\Topmenu" />

</config>

Modifier `app/code/<MyNamespace>/Topmenu/etc/module.xml`:

On déclare hériter de <module name="Magento_Theme" />:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vital_Topmenu" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme" />
        </sequence>
    </module>
</config>

<?xml version="1.0"?>

</sequence>

</module>

</config>

Créer `app/code/<MyVendor>/Topmenu/Block/Html/Topmenu.php`:

Dans notre exemple, il s’agit du fichier vendor/magento/module-theme/Block/Html/Topmenu.php que nous allons surcharger comme suit dans app/code/<MyNamespace>/Topmenu/Block/Html/Topmenu.php. Nous y ajoutons les classes CSS nécessaires au fonctionnement du composant Drilldown de Foundation 6:

<?php

namespace Vital\Topmenu\Block\Html;

use Magento\Framework\Data\Tree\Node;

/**
 * Html page top menu block
 *
 * @api
 * @since 100.0.2
 */
class Topmenu extends \Magento\Theme\Block\Html\Topmenu
{
    /**
     * Add sub menu HTML code for current menu item
     *
     * @param Node $child
     * @param string $childLevel
     * @param string $childrenWrapClass
     * @param int $limit
     * @return string HTML code
     */
    protected function _addSubMenu($child, $childLevel, $childrenWrapClass, $limit)
    {
        $html = '';
        if (!$child->hasChildren()) {
            return $html;
        }

        $colStops = [];
        if ($childLevel == 0 && $limit) {
            $colStops = $this->_columnBrake($child->getChildren(), $limit);
        }

        $html .= '<ul class="level' . $childLevel . ' ' . $childrenWrapClass . ' menu vertical nested">';
        $html .= $this->_getHtml($child, $childrenWrapClass, $limit, $colStops);
        $html .= '</ul>';

        return $html;
    }



    /**
     * Returns array of menu item's classes
     *
     * @param Node $item
     * @return array
     */
    protected function _getMenuItemClasses(Node $item)
    {
        $classes = [
            'level' . $item->getLevel(),
            $item->getPositionClass(),
        ];

        if ($item->getIsCategory()) {
            $classes[] = 'category-item';
        }

        if ($item->getIsFirst()) {
            $classes[] = 'first';
        }

        if ($item->getIsActive()) {
            $classes[] = 'active';
        } elseif ($item->getHasActive()) {
            $classes[] = 'has-active';
        }

        if ($item->getIsLast()) {
            $classes[] = 'last';
        }

        if ($item->getClass()) {
            $classes[] = $item->getClass();
        }

        if ($item->hasChildren()) {
            $classes[] = 'parent';
        }

        return $classes;
    }
}

<?php

namespace Vital\Topmenu\Block\Html;

use Magento\Framework\Data\Tree\Node;

/**

* Html page top menu block

* @api

* @since 100.0.2

class Topmenu extends \Magento\Theme\Block\Html\Topmenu

{

/**

* Add sub menu HTML code for current menu item

* @param Node $child

* @param string $childLevel

* @param string $childrenWrapClass

* @param int $limit

* @return string HTML code

protected function _addSubMenu($child, $childLevel, $childrenWrapClass, $limit)

{

$html = '';

if (!$child->hasChildren()) {

return $html;

}

$colStops = [];

if ($childLevel == 0 && $limit) {

$colStops = $this->_columnBrake($child->getChildren(), $limit);

}

$html .= '<ul class="level' . $childLevel . ' ' . $childrenWrapClass . ' menu vertical nested">';

$html .= $this->_getHtml($child, $childrenWrapClass, $limit, $colStops);

$html .= '</ul>';

return $html;

}

/**

* Returns array of menu item's classes

* @param Node $item

* @return array

protected function _getMenuItemClasses(Node $item)

{

$classes = [

'level' . $item->getLevel(),

$item->getPositionClass(),

];

if ($item->getIsCategory()) {

$classes[] = 'category-item';

}

if ($item->getIsFirst()) {

$classes[] = 'first';

}

if ($item->getIsActive()) {

$classes[] = 'active';

} elseif ($item->getHasActive()) {

$classes[] = 'has-active';

}

if ($item->getIsLast()) {

$classes[] = 'last';

}

if ($item->getClass()) {

$classes[] = $item->getClass();

}

if ($item->hasChildren()) {

$classes[] = 'parent';

}

return $classes;

}

Côté `app/design/frontend/<MyVendor>/<MyTheme>` (theme)

Créer `app/design/frontend/<MyVendor>/<MyTheme>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml`:

Référence: [Magento 2] Ajouter le framework Foundation 6 for sites dans un thème et rendre ses widgets javascript disponibles avec RequireJS.

Dans notre exemple, il s’agit du fichier app/design/frontend/Sm/venuse/Sm_Venuse/templates/html/mobile/nav-mobile.phtml que nous allons surcharger comme suit dans app/design/frontend/<MyVendor>/<MyModule>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml:

<?php //Extends: app/design/frontend/Sm/venuse/Sm_Venuse/templates/html/mobile/nav-mobile.phtml ?>

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
/**
 * Top menu for store
 *
 * @see \Magento\Theme\Block\Html\Topmenu
 */
?>

<?php
$columnsLimit = $block->getColumnsLimit() ?: 0;
$_menu        = $block->getHtml('level-top', 'submenu', $columnsLimit);
$_config      = $this->helper('Sm\Themecore\Helper\Data');
$menuType     = $_config->getGeneral('navigation_group/menu_style');
?>
<?php
//<div class="nav-mobile-container sidebar-type">
//    <nav id="navigation-mobile" class="navigation-mobile">
?>
<div class="nav-mobile-container sidebar-type">
    <nav id="navigation-mobile-drilldown" class="navigation-mobile-drilldown">
        <?php if ($menuType == 'css') { ?>
            <ul class="vertical menu drilldown">
                <?php /* @escapeNotVerified */
                echo $_menu; ?>
            </ul>
        <?php } ?>
    </nav>
</div>

<script type="text/javascript">
    require([
        'jquery',
        'foundation'
    ], function($, Foundation) {
        'use strict';

        // Avant d'initialiser notre Drilldown, on modifie l'option "backButton" du plugin pour permettre la traduction du libellé "Back/Retour"
        Foundation.Drilldown.defaults.backButton = '<li class="js-drilldown-back"><a tabindex="0"><?php echo __('Back') ?></a></li>';
        var $drilldown = new Foundation.Drilldown($('#navigation-mobile-drilldown'));
    });
</script>

<?php //Extends: app/design/frontend/Sm/venuse/Sm_Venuse/templates/html/mobile/nav-mobile.phtml ?>

<?php

/**

* See COPYING.txt for license details.

// @codingStandardsIgnoreFile

<?php

/**

* Top menu for store

* @see \Magento\Theme\Block\Html\Topmenu

<?php

$columnsLimit = $block->getColumnsLimit() ?: 0;

$_menu = $block->getHtml('level-top', 'submenu', $columnsLimit);

$_config = $this->helper('Sm\Themecore\Helper\Data');

$menuType = $_config->getGeneral('navigation_group/menu_style');

<?php

//<div class="nav-mobile-container sidebar-type">

// <nav id="navigation-mobile" class="navigation-mobile">

<?php if ($menuType == 'css') { ?>

<?php /* @escapeNotVerified */

echo $_menu; ?>

</ul>

<?php } ?>

</nav>

</div>

require([

'jquery',

'foundation'

], function($, Foundation) {

'use strict';

// Avant d'initialiser notre Drilldown, on modifie l'option "backButton" du plugin pour permettre la traduction du libellé "Back/Retour"

Foundation.Drilldown.defaults.backButton = '<li class="js-drilldown-back"><a tabindex="0"><?php echo __('Back') ?></a></li>';

var $drilldown = new Foundation.Drilldown($('#navigation-mobile-drilldown'));

});

</script>

Gestion des styles

On peut éclater les styles de Foundation en deux fichiers distincts qu’on va consigner dans un dossier components:

`app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_menu.less`

.menu {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
[data-whatinput='mouse'] .menu li {
    outline: 0; }
.menu a,
.menu .button {
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: 0.7rem 1rem; }
.menu input,
.menu select,
.menu a,
.menu button {
    margin-bottom: 0; }
.menu input {
    display: inline-block; }
.menu, .menu.horizontal {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row; }
.menu.vertical {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column; }
.menu.expanded li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px; }
.menu.simple {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
.menu.simple li + li {
    margin-left: 1rem; }
.menu.simple a {
    padding: 0; }
@media print, screen and (min-width: 40em) {
    .menu.medium-horizontal {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; }
    .menu.medium-vertical {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column; }
    .menu.medium-expanded li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
        flex: 1 1 0px; }
    .menu.medium-simple li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
        flex: 1 1 0px; } }
@media print, screen and (min-width: 64em) {
    .menu.large-horizontal {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; }
    .menu.large-vertical {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column; }
    .menu.large-expanded li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
        flex: 1 1 0px; }
    .menu.large-simple li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
        flex: 1 1 0px; } }
.menu.nested {
    margin-right: 0;
    margin-left: 1rem; }
.menu.icons a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
.menu.icon-top a, .menu.icon-right a, .menu.icon-bottom a, .menu.icon-left a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
.menu.icon-left li a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; }
.menu.icon-left li a img,
.menu.icon-left li a i,
.menu.icon-left li a svg {
    margin-right: 0.25rem; }
.menu.icon-right li a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; }
.menu.icon-right li a img,
.menu.icon-right li a i,
.menu.icon-right li a svg {
    margin-left: 0.25rem; }
.menu.icon-top li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap; }
.menu.icon-top li a img,
.menu.icon-top li a i,
.menu.icon-top li a svg {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    margin-bottom: 0.25rem;
    text-align: center; }
.menu.icon-bottom li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap; }
.menu.icon-bottom li a img,
.menu.icon-bottom li a i,
.menu.icon-bottom li a svg {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    margin-bottom: 0.25rem;
    text-align: center; }
.menu .is-active > a {
    background: @store_base-color;
    color: #fefefe; }
.menu .active > a {
    background: @store_base-color;
    color: #fefefe; }
.menu.align-left {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
.menu.align-right li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
.menu.align-right li .submenu li {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
.menu.align-right.vertical li {
    display: block;
    text-align: right; }
.menu.align-right.vertical li .submenu li {
    text-align: right; }
.menu.align-right .nested {
    margin-right: 1rem;
    margin-left: 0; }
.menu.align-center li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
.menu.align-center li .submenu li {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
.menu .menu-text {
    padding: 0.7rem 1rem;
    font-weight: bold;
    line-height: 1;
    color: inherit; }

.menu-centered > .menu {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
.menu-centered > .menu li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
.menu-centered > .menu li .submenu li {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start; }

.no-js [data-responsive-menu] ul {
    display: none; }

.menu-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 16px;
    cursor: pointer; }
.menu-icon::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #fefefe;
    -webkit-box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
    box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
    content: ''; }
.menu-icon:hover::after {
    background: #cacaca;
    -webkit-box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca;
    box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; }

.menu-icon.dark {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 16px;
    cursor: pointer; }
.menu-icon.dark::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #0a0a0a;
    -webkit-box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
    box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
    content: ''; }
.menu-icon.dark:hover::after {
    background: #8a8a8a;
    -webkit-box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a;
    box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; }

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

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

.menu {

padding: 0;

margin: 0;

list-style: none;

position: relative;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap; }

[data-whatinput='mouse'] .menu li {

outline: 0; }

.menu a,

.menu .button {

line-height: 1;

text-decoration: none;

display: block;

padding: 0.7rem 1rem; }

.menu input,

.menu select,

.menu a,

.menu button {

margin-bottom: 0; }

.menu input {

display: inline-block; }

.menu, .menu.horizontal {

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row; }

.menu.vertical {

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column; }

.menu.expanded li {

-webkit-box-flex: 1;

-webkit-flex: 1 1 0px;

-ms-flex: 1 1 0px;

flex: 1 1 0px; }

.menu.simple {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center; }

.menu.simple li + li {

margin-left: 1rem; }

.menu.simple a {

padding: 0; }

@media print, screen and (min-width: 40em) {

.menu.medium-horizontal {

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row; }

.menu.medium-vertical {

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column; }

.menu.medium-expanded li {

-webkit-box-flex: 1;

-webkit-flex: 1 1 0px;

-ms-flex: 1 1 0px;

flex: 1 1 0px; }

.menu.medium-simple li {

-webkit-box-flex: 1;

-webkit-flex: 1 1 0px;

-ms-flex: 1 1 0px;

flex: 1 1 0px; } }

@media print, screen and (min-width: 64em) {

.menu.large-horizontal {

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row; }

.menu.large-vertical {

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column; }

.menu.large-expanded li {

-webkit-box-flex: 1;

-webkit-flex: 1 1 0px;

-ms-flex: 1 1 0px;

flex: 1 1 0px; }

.menu.large-simple li {

-webkit-box-flex: 1;

-webkit-flex: 1 1 0px;

-ms-flex: 1 1 0px;

flex: 1 1 0px; } }

.menu.nested {

margin-right: 0;

margin-left: 1rem; }

.menu.icons a {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex; }

.menu.icon-top a, .menu.icon-right a, .menu.icon-bottom a, .menu.icon-left a {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex; }

.menu.icon-left li a {

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-flow: row nowrap;

-ms-flex-flow: row nowrap;

flex-flow: row nowrap; }

.menu.icon-left li a img,

.menu.icon-left li a i,

.menu.icon-left li a svg {

margin-right: 0.25rem; }

.menu.icon-right li a {

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-flow: row nowrap;

-ms-flex-flow: row nowrap;

flex-flow: row nowrap; }

.menu.icon-right li a img,

.menu.icon-right li a i,

.menu.icon-right li a svg {

margin-left: 0.25rem; }

.menu.icon-top li a {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-flow: column nowrap;

-ms-flex-flow: column nowrap;

flex-flow: column nowrap; }

.menu.icon-top li a img,

.menu.icon-top li a i,

.menu.icon-top li a svg {

-webkit-align-self: stretch;

-ms-flex-item-align: stretch;

align-self: stretch;

margin-bottom: 0.25rem;

text-align: center; }

.menu.icon-bottom li a {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-flow: column nowrap;

-ms-flex-flow: column nowrap;

flex-flow: column nowrap; }

.menu.icon-bottom li a img,

.menu.icon-bottom li a i,

.menu.icon-bottom li a svg {

-webkit-align-self: stretch;

-ms-flex-item-align: stretch;

align-self: stretch;

margin-bottom: 0.25rem;

text-align: center; }

.menu .is-active > a {

background: @store_base-color;

color: #fefefe; }

.menu .active > a {

background: @store_base-color;

color: #fefefe; }

.menu.align-left {

-webkit-box-pack: start;

-webkit-justify-content: flex-start;

-ms-flex-pack: start;

justify-content: flex-start; }

.menu.align-right li {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: end;

-webkit-justify-content: flex-end;

-ms-flex-pack: end;

justify-content: flex-end; }

.menu.align-right li .submenu li {

-webkit-box-pack: start;

-webkit-justify-content: flex-start;

-ms-flex-pack: start;

justify-content: flex-start; }

.menu.align-right.vertical li {

display: block;

text-align: right; }

.menu.align-right.vertical li .submenu li {

text-align: right; }

.menu.align-right .nested {

margin-right: 1rem;

margin-left: 0; }

.menu.align-center li {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center; }

.menu.align-center li .submenu li {

-webkit-box-pack: start;

-webkit-justify-content: flex-start;

-ms-flex-pack: start;

justify-content: flex-start; }

.menu .menu-text {

padding: 0.7rem 1rem;

font-weight: bold;

line-height: 1;

color: inherit; }

.menu-centered > .menu {

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center; }

.menu-centered > .menu li {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center; }

.menu-centered > .menu li .submenu li {

-webkit-box-pack: start;

-webkit-justify-content: flex-start;

-ms-flex-pack: start;

justify-content: flex-start; }

.no-js [data-responsive-menu] ul {

display: none; }

.menu-icon {

position: relative;

display: inline-block;

vertical-align: middle;

width: 20px;

height: 16px;

cursor: pointer; }

.menu-icon::after {

position: absolute;

top: 0;

left: 0;

display: block;

width: 100%;

height: 2px;

background: #fefefe;

-webkit-box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;

box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;

content: ''; }

.menu-icon:hover::after {

background: #cacaca;

-webkit-box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca;

box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; }

.menu-icon.dark {

position: relative;

display: inline-block;

vertical-align: middle;

width: 20px;

height: 16px;

cursor: pointer; }

.menu-icon.dark::after {

position: absolute;

top: 0;

left: 0;

display: block;

width: 100%;

height: 2px;

background: #0a0a0a;

-webkit-box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;

box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;

content: ''; }

.menu-icon.dark:hover::after {

background: #8a8a8a;

-webkit-box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a;

box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; }

`app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_drilldown.less`

.is-drilldown {
    position: relative;
    overflow: hidden; }
.is-drilldown li {
    display: block; }
.is-drilldown.animate-height {
    -webkit-transition: height 0.5s;
    transition: height 0.5s; }

.drilldown a {
    padding: 0.7rem 1rem;
    background: #fefefe; }

.drilldown .is-drilldown-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: -1;
    width: 100%;
    background: #fefefe;
    -webkit-transition: -webkit-transform 0.15s linear;
    transition: -webkit-transform 0.15s linear;
    transition: transform 0.15s linear;
    transition: transform 0.15s linear, -webkit-transform 0.15s linear; }
.drilldown .is-drilldown-submenu.is-active {
    z-index: 1;
    display: block;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
.drilldown .is-drilldown-submenu.is-closing {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
.drilldown .is-drilldown-submenu a {
    padding: 0.7rem 1rem; }

.drilldown .nested.is-drilldown-submenu {
    margin-right: 0;
    margin-left: 0; }

.drilldown .drilldown-submenu-cover-previous {
    min-height: 100%; }

.drilldown .is-drilldown-submenu-parent > a {
    position: relative; }
.drilldown .is-drilldown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    content: '';
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent @store_base-color;
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 1rem; }

.drilldown.align-left .is-drilldown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    content: '';
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent @store_base-color;
    right: 1rem;
    left: auto; }

.drilldown.align-right .is-drilldown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    content: '';
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent @store_base-color transparent transparent;
    right: auto;
    left: 1rem; }

.drilldown .js-drilldown-back > a::before {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    content: '';
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent @store_base-color transparent transparent;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.75rem; }

.is-drilldown {

position: relative;

overflow: hidden; }

.is-drilldown li {

display: block; }

.is-drilldown.animate-height {

-webkit-transition: height 0.5s;

transition: height 0.5s; }

.drilldown a {

padding: 0.7rem 1rem;

background: #fefefe; }

.drilldown .is-drilldown-submenu {

position: absolute;

top: 0;

left: 100%;

z-index: -1;

width: 100%;

background: #fefefe;

-webkit-transition: -webkit-transform 0.15s linear;

transition: -webkit-transform 0.15s linear;

transition: transform 0.15s linear;

transition: transform 0.15s linear, -webkit-transform 0.15s linear; }

.drilldown .is-drilldown-submenu.is-active {

z-index: 1;

display: block;

-webkit-transform: translateX(-100%);

-ms-transform: translateX(-100%);

transform: translateX(-100%); }

.drilldown .is-drilldown-submenu.is-closing {

-webkit-transform: translateX(100%);

-ms-transform: translateX(100%);

transform: translateX(100%); }

.drilldown .is-drilldown-submenu a {

padding: 0.7rem 1rem; }

.drilldown .nested.is-drilldown-submenu {

margin-right: 0;

margin-left: 0; }

.drilldown .drilldown-submenu-cover-previous {

min-height: 100%; }

.drilldown .is-drilldown-submenu-parent > a {

position: relative; }

.drilldown .is-drilldown-submenu-parent > a::after {

display: block;

width: 0;

height: 0;

border: inset 6px;

content: '';

border-right-width: 0;

border-left-style: solid;

border-color: transparent transparent transparent @store_base-color;

position: absolute;

top: 50%;

margin-top: -6px;

right: 1rem; }

.drilldown.align-left .is-drilldown-submenu-parent > a::after {

display: block;

width: 0;

height: 0;

border: inset 6px;

content: '';

border-right-width: 0;

border-left-style: solid;

border-color: transparent transparent transparent @store_base-color;

right: 1rem;

left: auto; }

.drilldown.align-right .is-drilldown-submenu-parent > a::after {

display: block;

width: 0;

height: 0;

border: inset 6px;

content: '';

border-left-width: 0;

border-right-style: solid;

border-color: transparent @store_base-color transparent transparent;

right: auto;

left: 1rem; }

.drilldown .js-drilldown-back > a::before {

display: block;

width: 0;

height: 0;

border: inset 6px;

content: '';

border-left-width: 0;

border-right-style: solid;

border-color: transparent @store_base-color transparent transparent;

display: inline-block;

vertical-align: middle;

margin-right: 0.75rem; }

On ajoute les deux composants dans `_extend.less`

…ou ailleurs dans une feuille de style de votre thème. Il faut juste que les deux fichiers soient importés. Veiller également à ce que les variables concernant les couleurs soient accessibles pour la compilation. Dans mon exemple, @store_base-color.

/* components */
@import 'components/_foundation_menu.less';
@import 'components/_foundation_drilldown.less';

/* components */

@import 'components/_foundation_menu.less';

@import 'components/_foundation_drilldown.less';

Gestion des JS

Dans mon exemple, je n’ai pas eu besoin de modifier le JS natif de Foundation. Je l’importe donc via le dossier vendor: app/design/frontend/<MyVendor>/<mytheme>/web/js/vendor/ (si vous avez bien suivi les directives données dans cet autre billet).

Ne pas oublier de créer `app/design/frontend/<MyVendor>/<mytheme>/requirejs-config.js`

var config = {

    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'foundation': 'js/vendor/foundation/foundation.min'
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    // Exports: if the library is not AMD aware, you need to tell requirejs what
    // to look for so it knows the script has loaded correctly. You can do this with an
    // "exports" entry in your shim. The value must be a variable defined within
    // the library.
    shim: {
        'foundation': {
            deps: ['jquery'],
            exports: 'Foundation'
        }
    }

};

var config = {

// Paths defines associations from library name (used to include the library,

// for example when using "define") and the library file path.

paths: {

'foundation': 'js/vendor/foundation/foundation.min'

// Shim: when you're loading your dependencies, requirejs loads them all

// concurrently. You need to set up a shim to tell requirejs that the library

// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends

// on jQuery).

// Exports: if the library is not AMD aware, you need to tell requirejs what

// to look for so it knows the script has loaded correctly. You can do this with an

// "exports" entry in your shim. The value must be a variable defined within

// the library.

shim: {

'foundation': {

deps: ['jquery'],

exports: 'Foundation'

}

};

[Foundation 6] Customiser le libellé du lien « Back » (retour) du composant Drilldown

30/10/2017 / admin

2 solutions possibles, mais le truc à savoir c’est qu’il faut également préciser quel markup HTML va venir englober le libellé. Si on précise uniquement un libellé, le markup englobant mis par défaut (et le lien de retour qui va avec) disparaîtront.

Via javaScript

Avant d’initialiser vos plug-ins Foundation:

  /*
   * Foundation plugins initialization
   */
  Foundation.Drilldown.defaults.backButton = '<li class="js-drilldown-back"><a tabindex="0">${trans:m.website.frontoffice.drilldown-back-link,ucf}</a></li>';
  $(document).foundation();

* Foundation plugins initialization

Foundation.Drilldown.defaults.backButton = '<li class="js-drilldown-back"><a tabindex="0">${trans:m.website.frontoffice.drilldown-back-link,ucf}</a></li>';

$(document).foundation();

Via un data-attribute HTML

Pas testé; pose probablement un problème de caractères ", '.

data-back-button='<li class="js-drilldown-back"><a tabindex="0">${trans:m.website.frontoffice.drilldown-back-link,ucf}</a></li>'

1	data-back-button='<li class="js-drilldown-back"><a tabindex="0">${trans:m.website.frontoffice.drilldown-back-link,ucf}</a></li>'

[Foundation 6] Un menu Foundation en vue Mobile et un menu full-custom en vue Desktop

11/07/2017 / admin

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>) !!!

/*
 * 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)

* 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)

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

<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>

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

headerMainNav

</button>

<li class="section0"><a href="#">Entreprises</a>

<a href="#">Nos solutions selon votre taille</a>

<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>

<a href="#">Nos solutions selon votre métier</a>

<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>

</ul>

</li>

<a href="#">Nos solutions selon vos besoins</a>

<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="#">Lorem ipsum dolor sit amet ...</a></li>

</ul>

</li>

</ul>

</li>

<li class="section1"><a href="#">Particuliers</a>

<a href="#">Complémentaire santé</a>

<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="#">Frontalier</a></li>

<li><a href="#">Surcomplémentaire</a></li>

</ul>

</li>

<a href="#">Epargne - Retraite</a>

<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>

<a href="#">Prévoyance - Dépendance</a>

<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="#">Lorem ipsum dolor sit amet ...</a></li>

</ul>

</li>

<a href="#">Accédez à nos solutions selon votre situation</a>

<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="#">Lorem ipsum dolor sit amet ...</a></li>

</ul>

</li>

</ul>

</li>

<li class="section2"><a href="#">Groupe</a>

<a href="#">A propos de nous</a>

<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>

<a href="#">Pour nous contacter</a>

<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>

Code SASS

// 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;
}

// 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;

}

//
@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);
      }      
    }
  }
}

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

/*
 * 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

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

Articles récents

Catégories

Archives

Méta

Étiquette : drilldown

[Foundation 6] Exploiter le composant Drilldown et jQuery pour créer un product finder wizard

Partie PHTML

Partie jQuery

[Foundation 6] Un lien parent cliquable qui renvoie vers une page dans le menu Drilldown

HTML

CSS

JS

[Magento 2] Un menu de navigation drilldown en mobile avec Foundation 6 à partir du Topmenu.php natif

Côté `app/code`, création d’un module Topmenu spécifique

Créer un module et étendre le Block `Topmenu.php`

Modifier `app/code/<MyNamespace>/Topmenu/etc/di.xml`:

Modifier `app/code/<MyNamespace>/Topmenu/etc/module.xml`:

Créer `app/code/<MyVendor>/Topmenu/Block/Html/Topmenu.php`:

Côté `app/design/frontend/<MyVendor>/<MyTheme>` (theme)

Créer `app/design/frontend/<MyVendor>/<MyTheme>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml`:

Gestion des styles

`app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_menu.less`

`app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_drilldown.less`

On ajoute les deux composants dans `_extend.less`

Gestion des JS

Ne pas oublier de créer `app/design/frontend/<MyVendor>/<mytheme>/requirejs-config.js`

[Foundation 6] Customiser le libellé du lien « Back » (retour) du composant Drilldown

Via javaScript

Via un data-attribute HTML

[Foundation 6] Un menu Foundation en vue Mobile et un menu full-custom en vue Desktop

Markup HTML

Code SASS

Code jQuery

Partie PHTML

Partie jQuery

HTML

CSS

JS

Côté app/code, création d’un module Topmenu spécifique

Créer un module et étendre le Block Topmenu.php

Modifier app/code/<MyNamespace>/Topmenu/etc/di.xml:

Modifier app/code/<MyNamespace>/Topmenu/etc/module.xml:

Créer app/code/<MyVendor>/Topmenu/Block/Html/Topmenu.php:

Côté app/design/frontend/<MyVendor>/<MyTheme> (theme)

Créer app/design/frontend/<MyVendor>/<MyTheme>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml:

Gestion des styles

app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_menu.less

app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_drilldown.less

On ajoute les deux composants dans _extend.less

Gestion des JS

Ne pas oublier de créer app/design/frontend/<MyVendor>/<mytheme>/requirejs-config.js

Via javaScript

Via un data-attribute HTML

Markup HTML

Code SASS

Code jQuery

Côté `app/code`, création d’un module Topmenu spécifique

Créer un module et étendre le Block `Topmenu.php`

Modifier `app/code/<MyNamespace>/Topmenu/etc/di.xml`:

Modifier `app/code/<MyNamespace>/Topmenu/etc/module.xml`:

Créer `app/code/<MyVendor>/Topmenu/Block/Html/Topmenu.php`:

Côté `app/design/frontend/<MyVendor>/<MyTheme>` (theme)

Créer `app/design/frontend/<MyVendor>/<MyTheme>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml`:

`app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_menu.less`

`app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_drilldown.less`

On ajoute les deux composants dans `_extend.less`

Ne pas oublier de créer `app/design/frontend/<MyVendor>/<mytheme>/requirejs-config.js`