Illustration changer icon menu e-monsite

Changer l'icon lorsque le menu est ouvert sur mobile

Après avoir descendu le menu sur mobile dans notre ancien trick, comment changer sur e-monsite l'aspect de l'icon de "menu" à une "croix" lorsque celui-ci est ouvert sur mobile ? EMS Tricks vous donne l'astuce !

Deux polices d'icons

Premièrement, il faut savoir que le thème Smart embarque dans sa feuille de style FontAwesome qui est une police vectorielle composée d'icons, en partie pour le web. C'est très utile lorsque l'on veut illustrer son contenu, menu, listes etc.

Dans le cas d'EMS Tricks, le style du site est plus calqué sur du Material Design (voir les Ressources pour savoir ce que c'est). Nous allons donc utiliser la base d'icon Material que met à disposition Google ici.

Nous allons vous montrer comment le faire avec les deux !

Attention, l'utilisation de ces deux polices est différente !

Avec Material Icons

Icons Material Icons

Ne fonctionne qu'avec les versions Pro d'e-monsite.

Pour pouvoir utiliser les icons Material il faut les télécharger sur votre site ! Pour cela copiez ce code dans les balises meta situées dans "Configuration > Réglages > Zones éditables".

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

1 script, plusieurs tâches

Comme indiqué précédemment, FontAwesome et Material Icon fonctionnent différemment. Il va donc falloir adapter le DOM généré par e-monsite pour que la structure de notre bibliothèque d'icons fonctionne.

Voici le script jQuery :

$(document).ready(function() {

var changeIcon = $('.navbar-toggle').children();
changeIcon.removeClass('fa fa-bars').addClass('material-icons close');
$(changeIcon).text('menu');

$('.container').on('click', '#navbar-overlay, .navbar-toggle', function() {

    if ( $(changeIcon).hasClass('close') ) {
        
        $(changeIcon).text('close').removeClass('close');
    }
    
    else {
            
        $(changeIcon).text('menu').addClass('close');
    };

});

});

Le script est composé de deux parties :

  • l'ajout de class CSS pour faire fonctionner Materiel Icons et connaitre l'état du bouton
  • la fonction sur l'événement click qui change le contenu pour modifier l'icon

On prévoit également que l'utilisateur appuie sur l'ombre du menu pour le fermer : l'icon doit aussi changer.

Avec FontAwesome

FontAwesome Icons

Dans ce cas, la démarche est plus simple car la bibliothèque d'icons est déjà dans le thème, il nous suffit juste de changer les class à l'aide de jQuery :

$(document).ready(function() {
    
var changeIcon = $('.navbar-toggle').children();

$('.container').on('click', '#navbar-overlay, .navbar-toggle', function() {

    if ( $(changeIcon).hasClass('fa-bars') ) {
        
        $(changeIcon).addClass('fa-times').removeClass('fa-bars');
    }
    
    else {
            
        $(changeIcon).addClass('fa-bars');
    };

});

});

Une multitude de choix !

Chez EMS Tricks nous avons choisi d'utiliser une croix, mais ces bibliothèques vous offrent d'autres possibilités ! Envoyez-nous vos sites pour voir ce que vous avez choisi !

burger menu javascript articles responsive navigation jquery

Commentaires

  • David Hermans
    J'ai mi l'icône Google et j'ai redescendu le menu sur mobile.
    Je passerai de temps à autre voir si parmi vos tricks proposés certains sont intéressants à appliquer pour les deux sites.
    Bon design votre site, comme je les aime.