Et voilà un petit tutoriel technique pour débuter 2019 sur de bonnes bases. Quoi de mieux qu’un peu d’HTML, de CSS 3 et de Javascript Vanilla (natif) pour faire oublier le foie gras, les huîtres et autres mets gourmands ? Nous allons prendre le cas d’un menu latéral ergonomique et UX Design (un swipe menu ou un slide menu dans le jargon) pour présenter plusieurs concepts en un rien de temps :
Nous allons avoir besoin de toutes ces techniques pour aller au bout de la démarche, et à la fin, nous pourrons obtenir un menu latéral avec effet swipe ou slide en Javascript et CSS 3 compatible sur ordinateur, tablette et mobile. Voici ce qui sera possible avec le code complet :
L’icône du menu burger est animée comme vous pouvez le voir pour que cela fasse encore plus UX design, et les deux événements (Touch Event et Click) fonctionnent en parallèle. Le menu a volontairement été adapté de plusieurs manières pour que vous ayez plusieurs idées de possibilités (menu en pleine largeur sur mobile, à 50% de largeur sur tablette et à 25% sur grand écran).
Avant de passer aux codes détaillées, voici un gif animé ci-dessous vous montre à quoi cela ressemble sur ordinateur…
Et voici le résultat avec un menu en pleine largeur sur mobile, avec effet swipe/slide et “click” en JS natif.
Pressé de savoir faire tout ça en quelques lignes de code (car tout le secret réside dans quelques dizaines de ligne de code au total…) ? Vous pouvez d’ores-et-déjà télécharger le code complet de l’exemple présenté dans les captures d’écran, ça pourrait vous aider pour les copier/coller. C’est parti… 🙂
Télécharger “SwipeMenu.zip”SwipeMenu.zip – Téléchargé 18063 fois – 52 Ko
Création de l’HTML utile pour le menu burger mais aussi pour le menu qui apparaîtra latéralement.
Ici, le menu est un bloc <nav> à part et vous pouvez placer le bloc du menu burger là où c’est pertinent pour vous.
Dans l’exemple complet à télécharger, il y a bien plus d’HTML puis j’ai enrobé tout cela dans une interface d’exemple pour que ça ait plus de consistance… ^^
Et pour le menu burger (à placer où vous voulez le voir s’afficher)…
Mettre l’ensemble un peu en forme en CSS. Le code présenté correspond à l’exemple des captures d’écran, vous pouvez bien sûr modifier le rendu final selon vos choix.
Il convient juste de respecter le style du menu burger et notamment les transformations 2D (avec transform).
Ajouter les animations CSS 3 avec la propriété animation et les @keyframes.
Notez bien la présence du mot-clé « forwards » dans la propriété animation. Cela permet de clôturer l’animation et de la laisser en l’état (sinon le menu disparaît après…).
Il n’existe pas une compatibilité pleine de @keyframes (ne fonctionne pas sur IE 6 à 9) mais cela reste globalement fonctionnel partout en 2019. Il n’existe à priori pas de polyfill spécifique donc il faudrait réaliser l’animation avec la propriété transition dans ce cas (mais ce serait un peu moins fonctionnel d’après mes tests), ou via Javascript pour contourner le problème…
Vous pouvez également ajouter le CSS pour la version responsive de l’effet de menu latéral.
Ici, rien n’est obligatoire et peut être totalement modifié, c’est juste pour avoir des rendus différents selon les tailles d’écran, grâce aux media queries.
Il est temps de passer à Javascript.
La première étape permet de récupérer les blocs cibles (menu burger et menu latéral), cela nous sera utile tout au long des étapes Javascript…
Gérons dans un premier temps l’effet de l’événement « click », qui est le plus simple.
Comme nous prévoyons d’utiliser les événements Touch (touchstart notamment) de Javascript, j’ai dû rajouter un petit bout de code qui permet de détecter le premier événement réalisé sur certains types d’écrans, afin d’éviter tout conflit d’événements JS. En effet, peut arriver que « click » et « touchstart » entrent en conflit, ce qui provoque l’ouverture/fermeture lors du clic sur le menu burger…
Pour le reste, rien de bien compliqué, nous créons une sorte de « toggle » simple pour ajouter ou non une classe CSS. Selon la classe présente ou non, le style CSS adapté s’applique et créé l’animation.
En commentaire, j’ai mis une version alternative pour un cas, avec l’objet .classList en Javascript, mais la compatibilité est limitée…
Rendu visuel à cet étape…
Un clic sur le bouton entraîne la déformation du menu burger pour se transformer en croix, et le menu latéral apparaît en arrivant de la gauche…
Dernière étape pour gérer les Touch Events avec Javascript. L’idée est de créer un effet d’ouverture du menu quand on glisse avec un doigt sur un écran tactile de la gauche vers la droite, et un effet de fermeture dans l’autre sens.
Pour capter un geste en particulier, il convient de trouver le sens de déplacement (gauche vers la droite, haut vers le bas, etc.) et d’indiquer une distance minimum à parcourir pour que le geste semble suffisant (un glissement de doigt signifie que « x » pixels sont parcours avec un appui sur l’écran tactile…).
Pour arriver à nos fins, il faut premièrement capter les événements touchstart (au premier toucher), touchmove (pendant le déplacement) et touchend (fin du toucher). Chaque étape méritera son petit bout de code :
L’exemple présenté ici reste simple et peut totalement être modifié à votre guise, c’est le principe qu’il faut retenir et comprendre. Il convient de ne pas oublier les risques de conflits entre « click » et « touchstart » par exemple, ou encore bien faire chaque étape autour des Touch Events pour calculer le sens du swipe ou slide effect, etc.
Vous pouvez également vous réaliser autre chose qu’un menu avec le même effet, il faudrait donc peut-être du Javascript et HTML plus poussé pour réaliser cela. Mais quoi qu’il en soit, l’effet d’apparition latérale serait identique.
J’espère que ce premier tutoriel de 2019 vous aura plu en tout cas, n’hésitez pas à me faire des retours… 😉
Bonjour,
Etant peu au fait du javascript, mais étant intéressé par ce modèle de mise en forme du(des) menu(s), je me demande si ces fonctions de swipe on et off du menu seraient paramétrables, afin d’être utilisable non seulement pour dévoiler le menu caché derrière le burger, mais aussi pour faire apparaitre les menus dits “drop-down” associés aux entrées primaires de la barre de menu. dans le cadre d’une évolution responsive.
Bonjour,
En théorie cela me semble possible, je n’y vois pas d’inconvénient particulier. Il faut juste adapter le code JS en fonction des “drop-down” mais le principe est globalement identique. 😉
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 32,00 € (345 pages)
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 32,00 € (570 pages)
Auteur : Alexandra Martin / Mathieu Chartier
Editeur : Eyrolles
Prix : 29,90 € (522 pages)
Auteur : Mathieu Chartier
Editeur : First Interactive
Prix : 19,90 € (411 pages)
Auteur : Mathieu Chartier
Editeur : First Interactive
Prix : 29,90 € (622 pages)
Ce blog est le résultat de plusieurs années de travail mais il ne fait pas manger son homme. Découvrez l’agence web et l’organisme de formation géré par Mathieu Chartier et n’hésitez pas à prendre contact pour suivre des formations personnalisées.
Tous droits réservés © Blog Internet-Formation 2009 – 2022
C