Changer l'icon lorsque le menu est ouvert sur mobile
- Par ems-tricks
- Le 16/01/2017
- Dans Tricks JS pour site e-monsite
- 2 commentaires
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
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
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 !
articles javascript navigation responsive jquery menu burger
Commentaires
-
- 1. Cyril Le 20/02/2018
Bonjour,
J'ai mis en place ce Trick sur mon site mais il ne fonctionne plus.
En effet la croix fonctionne mais sa mise en place est lorsque l'on ferme le menu et pas juste après l'ouverture.
Merci par avance de me dire quelle modification est à faire.
J'ai cherché mais pas trouvé la solution.
Cordialement.
Cyril. -
- 2. David Hermans Le 14/02/2017
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.
Ajouter un commentaire