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'

}

};

Articles récents

Catégories

Archives

Méta

Étiquette : extension de Block

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

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

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`