Changer l'icon lorsque le menu est ouvert sur mobile

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 !

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.

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');
    };

});

});

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 !