Comment créer une icône de hamburger pour votre menu Divi Mega

Publié: 2017-04-18

Les icônes du hamburger sont devenues synonymes de menus. Les trois lignes horizontales empilées représentent l'idée d'une liste et ont été surnommées « hamburger » pour leurs similitudes évidentes. Divi utilise l'icône hamburger pour basculer votre menu principal sur mobile et sur certains styles d'en-tête comme « glisser dans » et « plein écran ».

Aujourd'hui, je vais vous montrer comment utiliser une icône de hamburger pour basculer un méga menu en un clic. C'est une excellente solution pour les sites avec de nombreuses options de menu. L'icône de hamburger garde l'en-tête libre de tout encombrement. De plus, la disposition organisée en 4 colonnes du méga menu permet aux utilisateurs de trouver ce dont ils ont besoin rapidement et efficacement.

L'Avant et l'Après

Par défaut, le méga menu fonctionne en survolant le lien du menu parent principal :

Après avoir mis en œuvre le nouveau design et les nouvelles fonctionnalités, le méga menu ne s'affiche que lorsque vous cliquez sur l'icône du hamburger.

Mettre en œuvre le design avec Divi

Abonnez-vous à notre chaîne Youtube

Convertissez votre menu en un méga menu

Vous devez d'abord créer un méga menu ou changer votre menu actuel en un méga menu. Cette partie est assez simple.

Depuis le tableau de bord wordpress, allez dans Apparence → Menus. Cliquez sur Créer un nouveau menu et donnez un nom à votre menu.

Cliquez sur Créer un menu

Assurez-vous d'activer la propriété de menu Classes CSS en cliquant sur l'onglet Options d'écran en haut à droite de l'écran Menus et en cochant Classes CSS.

Vous pouvez maintenant ajouter vos éléments de menu au nouveau menu que vous avez créé.

Tout d'abord, ajoutons l'élément de menu qui servira d'icône de hamburger. Cet élément de menu sera le parent de tous les autres éléments de menu.

Pour créer cet élément de menu, créez un lien personnalisé avec les paramètres suivants : 

URL: http://#

Navigation Label: <div class="hamburger"></div>

CSS Classes: mega-menu

L'URL est simplement un hashtag (#) car cet élément de menu ne sera pas lié à une certaine page. Nous utiliserons cet élément de menu pour déployer notre méga menu en un clic.

L'étiquette de navigation contient un code html simple (un div avec une classe de « hamburger »). Ce sera ce que nous utiliserons pour afficher notre icône de hamburger en utilisant Custom CSS.

La classe CSS « mega-menu » est ce qui déploie la fonctionnalité de méga menu. Cette classe CSS ne doit être appliquée qu'une seule fois à l'élément de menu parent principal et à aucun des sous-éléments.

Il est maintenant temps d'ajouter les éléments de menu qui composeront votre méga menu. Pour cet exemple, j'utilise les éléments de menu parent et sous-menu suivants sous l'élément de menu principal méga :

  • Lien Icône Hamburger Mega Menu
    • À propos de nous
      • Notre équipe
      • Notre mission
      • Histoire de l'entreprise
    • Prestations de service
      • Création de sites web
      • Développement web
      • Référencement
    • Notre travail
      • Blogues
      • Commerce électronique
      • Entreprise
    • Nous contacter
      • Soutien
      • instructions
      • Travaux

Maintenant, organisez/faites glisser les quatre éléments de menu (chacun avec trois sous-éléments qui leur sont propres) pour devenir des sous-éléments du lien principal du Mega Menu parent.

Lorsque vous avez terminé d'organiser le menu, assurez-vous de vérifier le menu principal sous Paramètres du menu.

Enregistrer le menu

Ajout de jQuery pour afficher le menu en cliquant au lieu de survoler

Maintenant que votre méga menu est créé, nous devons ajouter un peu de jQuery pour que notre méga menu s'affiche lorsque vous cliquez sur l'icône au lieu de survoler (ce qui est la valeur par défaut). Pour ce faire, allez dans Options du thème → Intégration et ajoutez le script suivant dans la section « Ajouter du code à l'en-tête de votre blog » : 

<script>
/*** Open menu itmes with children on click not hover ***/

(function($) {

jQuery(document).ready(function() {
jQuery('#top-menu li.mega-menu > a, #et-secondary-nav li.mega-menu > a').click(function(e) {
e.preventDefault();

jQuery(this).parent().toggleClass('show-submenu');
});
});

jQuery(document).click(function(e) {
if(!$(e.target).closest('.show-submenu').length) {
jQuery('.show-submenu').removeClass('show-submenu');
}
});

})(jQuery);
</script>

Ajout de CSS personnalisé

Pendant que vous êtes dans les options du thème, sous Paramètres généraux, ajoutez le CSS personnalisé suivant : 

/*** hides sub-menu on hover ***/
#et-top-navigation #top-menu li.et-hover ul.sub-menu { display: none!important; }

/*** shows submenu on click ***/
#et-top-navigation #top-menu li.show-submenu ul.sub-menu { display: block!important; visibility: visible!important; opacity: 1!important; }

/*** Hide hamburger menu item on mobile ***/
.et_mobile_menu .mega-menu >
 a{display:none;}


#top-menu .mega-menu > a, #et-secondary-nav .mega-menu > a {padding-bottom: 24px !important;}

/**** hide down arrow ****/
#top-menu .mega-menu > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;}

/*** show hamburger icon ***/
.hamburger:before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 0.6em;
    text-transform: none;
    speak: none;
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    vertical-align: -11px;
    padding-right: 3px;
    font-size: 32px; /*change size of icon here*/
    content: "\61"; /*change icon here*/
    color: #333; /*change color of icon here*/
}

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d"; /*change x icon here*/
}

C'est ça!

Allez maintenant voir vos résultats

Plus d'options de personnalisation

Le CSS que vous avez entré contient des commentaires afin que vous puissiez apporter des modifications au style de votre icône de hamburger. Voici où vous pouvez trouver les deux sections principales de CSS pour styliser votre icône :

Changer l'icône du hamburger

Divi est livré avec une variété d'icônes de polices que vous pouvez utiliser pour votre site. Si vous souhaitez changer l'icône du hamburger pour un style différent, il vous suffit de rechercher et de modifier la ligne de CSS étiquetée avec le commentaire « changer l'icône ici » : 

content: "\61"; /*change icon here*/

Voici les différentes valeurs de contenu pour les différentes icônes de hamburger. Remplacez simplement « \61 » par l'un des éléments suivants :

Menu d'icônes carrées – \62

Menu d'icônes de cercle - \63

ul Icône – \64

ol icône – \65

Icône de menu carré sombre – \e056

Icône de menu de cercle sombre – \e057

Modification de l'icône « X »

Si vous utilisez l'icône du menu hamburger différente, vous devez modifier l'icône « x » pour qu'elle corresponde au design. Trouvez simplement le css suivant : 

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d";
}

Remplacez « \4d » par l'une des valeurs de contenu suivantes :

Icône de menu de fermeture de cercle – \51

Icône de menu de fermeture de cercle sombre – \e051

Voici à quoi ressemble l'icône hamburger du méga menu avec les styles d'icônes de cercle noir gratuits en place :

Changer la couleur de votre icône de hamburger

Si vous souhaitez changer la couleur de l'icône de votre hamburger, modifiez cette ligne de CSS intitulée « changer la couleur de l'icône » : 

Color: #333; /*change icon color here*/

Modification de la taille de votre icône de hamburger

Si vous souhaitez modifier la taille de votre icône de hamburger, modifiez cette ligne de CSS intitulée « changer la taille de l'icône ici » : 

Font-size: 32px; /*change size of icon here*/

Ajouter une étiquette à votre icône de hamburger

Il est facile d'ajouter une étiquette à votre icône. Revenez simplement à Apparence → Menus et modifiez l'élément de menu tout en haut que vous avez attribué à la classe "mega-menu". Dans la zone de texte de l'étiquette de navigation, ajoutez votre texte d'étiquette à l'intérieur du div. Pour cet exemple, j'ai ajouté l'étiquette "menu".

<div class=”hamburger”>menu</div>

Maintenant, votre hamburger a une étiquette à côté.

Sensible?

Les méga menus ne fonctionnent que sur des tailles d'écran supérieures à 980px. Pour une taille d'écran inférieure à 980px (tablettes et smartphones), le menu basculera vers le menu mobile par défaut.

Dernières pensées

Si vous aimez les méga menus et que vous cherchez à créer un design épuré et minimaliste pour votre en-tête, l'ajout d'une icône de hamburger pour afficher votre méga menu est une excellente solution. Désormais, vos utilisateurs peuvent voir tous vos liens de navigation à la fois d'un simple clic.

De plus, les icônes de police intégrées de Divi facilitent la personnalisation de vos icônes de hamburger à l'aide de css, sans avoir à créer des icônes à partir de zéro.

Vous pouvez également ajouter des images à vos méga menus pour créer des méga menus encore plus remarquables.

C'est ça!

J'espère que vous apprécierez cette fonctionnalité. Au plaisir de vous entendre dans les commentaires.