Table des matières
ArticlesA lire
TLe widget Hamburger Menu est sur tous les autres sites de nos jours. Il est devenu synonyme du Web et, peut-être plus encore, du développement Web. Jetez un œil, par exemple, à Dribbble ou Codepen. Vous y trouverez une bonne part d’exemples. Ils viennent dans toutes les formes et tailles où l’un est plus élaboré que l’autre. Les développeurs et les concepteurs ne semblent pas en avoir assez du widget.
Le menu Hamburger n’est pas sans controverse. Certains le détestent et certains l’aiment. De nombreux articles en discutent et ses alternatives. Certains soutiennent que sa place est dans les livres d’histoire. Quel que soit son sort, il continue d’être largement utilisé. Maintes et maintes fois, il continue à apparaître dans de nouveaux sites. Il est particulièrement populaire pour les vues mobiles où les menus sont généralement masqués.
Il existe de nombreuses variantes qui explorent différents types d’animations. J’ai créé moi-même un couple. Voici quelques unes de mes créations:
Dans sa forme la plus simple, le menu Hamburger se présente sous la forme de lignes droites et parallèles. Habituellement, ils sont trois. Ces lignes restent sous une forme de conteneur cliquable. Les formes et les tailles des menus peuvent varier, mais leur utilisation est la même. Cliquer dessus fait basculer l’état du hamburger. Cette interaction fait que le menu va et vient entre son état ouvert et fermé. La manière conventionnelle de représenter l’état ouvert consiste à afficher un X. Il signale à l’utilisateur que toucher / cliquer sur le bouton ferme à nouveau le menu.
Très souvent, il y a une animation entre ces deux états. Des boutons comme ceux-ci sont d’excellentes opportunités pour les développeurs Web de ravir leurs utilisateurs. De manière générale, c’est l’endroit idéal pour ajouter une animation. L’animation de la transition d’état du bouton n’est pas seulement agréable à l’œil; il sert également un but. C’est une bonne expérience utilisateur pour donner aux utilisateurs des commentaires sur les interactions tactiles et cliquables.
L’animation de lignes SVG est, comme son nom l’indique, une technique pour animer des lignes. Ou, plus précisément, les chemins SVG. Il crée une apparence de dessin d’une ligne à l’écran. La méthode est apparue au milieu de la dernière décennie et est restée populaire depuis. Cet article de 2014 explique la technique en détail: https://css-tricks.com/svg-line-animation-works/.
L’effet est idéal pour le menu Hamburger car le widget est, le plus souvent, créé avec des lignes. Cet article explique comment utiliser la technique pour animer entre les deux états différents du menu Hamburger.
Tout d’abord, commençons par tracer les trois lignes. Le dessin de vecteurs nécessite un éditeur de vecteurs. C’est-à -dire, si vous n’êtes pas un codeur SVG noyau dur et que vous aimez le faire à la main. J’utilise Inkscape pour dessiner mes vecteurs.
La première chose à faire est de trouver une taille appropriée pour le dessin SVG. L’utilisation d’un document SVG 100 x 100 pixels est une bonne idée. Travailler avec des nombres pairs facilite la relation et le travail avec les tailles et les proportions. En théorie, il est possible d’aller avec n’importe quelle taille lors du dessin de ces vecteurs. N’oubliez pas que le S en SVG signifie évolutif.
Lorsque vous dessinez les lignes, réservons également une certaine marge de manœuvre pour l’animation sur les côtés du menu. Cet espace est réservé pour plus tard lors de l’animation des lignes. Dans l’éditeur, l’outil Plume crée de nouveaux traits.
C’était trop rapide pour toi? Si oui, voici la recette
- Tracez une ligne droite sur la partie supérieure de l’écran
- Déplacez les extrémités de la ligne pour la rendre large de 60 pixels. Centrez verticalement la ligne autour de y = 29.
- RĂ©glez la largeur de trait sur 6 pixels
- Dupliquez la ligne et déplacez la copie au centre du document SVG. À y = 47px, le centre de la ligne copiée atterrit à 50px. La moitié de la largeur de trait est de 3 pixels. Soit 47 + 3 = 50.
- Créez une autre copie et placez la troisième ligne à y = 68px. Placer la troisième ligne à cette position rend le hamburger correct symétriquement.
Les nombres ci-dessus, par exemple, la largeur du trait, ne doivent pas nécessairement être les nombres exacts, utilisés ici, si vous recréez cet exemple. L’important est de choisir des valeurs qui créent quelque chose de visuellement attrayant. Il est possible de modifier ces chiffres et de les affiner. Ils doivent être tels que le hamburger correspond au style de l’autre contenu de la page Web. C’est le travail du développeur Web de créer une apparence cohérente en créant des pages Web.
Un regard sur le code produit devrait ressembler à ce qui suit. Ces parties essentielles ci-dessous doivent être trouvées quelque part dans le code SVG.
La prochaine étape consiste à créer l’icône de fermeture X. La façon de le construire est d’étendre les lignes du haut et du bas. L’idée ici est de faire en sorte que le document SVG inclue les deux formes en même temps. Combiner les états ouvert / fermé va parfaitement de pair avec la technique d’animation de ligne SVG. Il permet d’animer entre les différentes formes du menu. À ce stade, la création pourrait ressembler à un nid d’oiseau. Ne vous inquiétez pas. Cela aura du sens plus tard en discutant de l’animation. Les trois parties suivantes doivent faire partie du modèle:
- Les lignes droites (le hamburger)
- Les lignes de connexion, joignant les deux formes
- L’icône de fermeture X
La façon d’étendre la ligne consiste à diviser le processus en trois étapes.
1. Prolongez la ligne
La première étape consiste à étendre la ligne supérieure avec une ligne avant-gardiste qui inclut une partie de l’icône X. À ce stade, le dessin n’a pas besoin d’être parfait. Il doit juste être assez bon, donc vous apercevez la moitié du X.
2. Ajustez les coordonnées
Après avoir étendu le chemin, l’étape suivante consiste à déplacer les nœuds de connexion à leurs coordonnées appropriées. La ligne de connexion peut être arbitraire. Cependant, l’icône X doit être proportionnelle au hamburger. Dans cet exemple, il s’agit d’une ligne allant de (25 px, 25 px) à (75 px, 75 px).
3. Lissez les lignes
Enfin, la conversion de la ligne en courbe de Bézier la rend lisse. Voyons d’abord à quoi cela ressemble en effectuant la procédure ci-dessus pour le chemin du haut. Là encore, l’outil stylo est à nouveau utile.
Une fois la ligne supérieure en place, il est temps de faire la même procédure pour la ligne inférieure. Puisque tout ce dont vous avez besoin est déjà à l’écran, il est alors logique de réutiliser le travail ci-dessus. Dupliquer, retourner et positionner la copie fait l’affaire pour remplacer la ligne de fond précédente. Avancer et reculer des objets est une façon d’accéder au bon chemin au bon moment.
Une fois le modèle terminé, il est temps de le déplacer vers HTML. Heureusement, HTML est interopérable avec SVG. Cela signifie que tout ce qui est SVG fonctionne directement dans n’importe quel document HTML. La copie du code SVG dans le balisage le fait apparaître à l’écran lors du chargement de la page dans un navigateur.
Placer des références, des sélecteurs HTML, sur les nœuds DOM SVG, est la prochaine étape. Cela ouvre le balisage au monde merveilleux des CSS. Ou, plus précisément, il permet la manipulation des chemins SVG. Avec CSS, ces éléments SVG peuvent avoir des styles, être animés et inspectés. Voici à quoi ressemble la structure des règles CSS après l’ajout de classes:
Une autre chose à faire est de centrer le menu et de supprimer la marge par défaut. Ce n’est pas un must, mais cela rend plus agréable de travailler avec le menu. Un conteneur flexbox, place commodément le widget au centre de la fenêtre du navigateur.
Une partie essentielle de la technique d’animation de ligne SVG est de connaître la longueur des chemins. Voici où brille le Dev Tools. La fenêtre de la console de l’inspecteur peut, de nombreuses manières, accéder aux éléments DOM. L’un des moyens les plus pratiques est la sténographie élément focalisé astucieux 0 $. Il donne un accès direct au nœud actuellement focalisé dans l’inspecteur. L’appel de fonction getTotalLength, appelable sur n’importe quel chemin SVG, mesure les lignes.
La mesure des lignes donne les longueurs 207px et 60px. Il ne devrait pas être surprenant de revoir le numéro 60. Il s’agit de la longueur d’origine des lignes de hamburger. Une autre chose à noter est que la première et la dernière ligne sont également longues, à l’exception des erreurs d’arrondi mineures. Ce résultat est à quoi s’attendre car ils sont des doublons. Les deux font 207 pixels de long lorsqu’ils sont arrondis vers le haut. Ces deux nombres, 207 et 60, sont les valeurs nécessaires pour commencer avec l’effet d’animation de ligne SVG.
Un excellent moyen de vous habituer à la technique d’animation de ligne est d’utiliser l’inspecteur. L’éditeur de style vous permet de modifier les règles CSS avec une rétroaction immédiate. La visualisation du changement permet de mieux comprendre comment le CSS affecte les chemins SVG. La boucle de rétroaction instantanée aide rapidement à affiner les valeurs souhaitées. Le but ici est d’utiliser le modèle, créé ci-dessus, pour trouver les deux ensembles de valeurs suivants:
- Les valeurs qui font réapparaître le hamburger.
- Les valeurs qui font réapparaître l’icône X.
Ces deux ensembles de valeurs représentent à leur tour les points finaux de l’animation. L’interpolation entre ces deux extrêmes est ce qui crée l’animation réelle.
La première chose à faire, en travaillant avec l’animation, est de définir accident vasculaire cérébral règle pour l’une des longues lignes. le accident vasculaire cérébral règle prend une plage de valeurs qui décrivent les tirets et les lacunes. L’effet d’animation de cet article n’a besoin que de deux valeurs. Ils sont un tiret et un écart. Une façon de trouver la paire de valeurs tiret / écart consiste à définir les deux valeurs sur toute la longueur de 207 pixels et à revenir en arrière. Les flèches haut et bas du clavier modifient pas à pas la valeur dans l’éditeur. Le fait de parcourir la première valeur de l’ensemble de valeurs révèle le hamburger.
La même procédure, comme ci-dessus, s’applique à l’icône X. Cette fois, la deuxième règle, stroke-dashoffset, entre en jeu. Le décalage pousse la ligne vers l’avant pour la repositionner. La ligne diagonale du X est légèrement plus longue que les lignes du hamburger. Pour cette raison, la ligne a besoin d’une extension. L’ajout d’une poignée de pixels ajuste sa longueur.
Voyons maintenant les résultats. Voici les différents ensembles de valeurs trouvés:
Les outils de développement sont un allié puissant en matière d’animation. Avec l’inspecteur, il est possible de tester, d’affiner et d’enregistrer des animations. L’éditeur de style permet de modifier CSS pour relancer immédiatement les animations. Tout dans le navigateur. Les outils de développement constituent le terrain de jeu idéal pour explorer et créer des animations.
La manière la plus simple de faire bouger des objets à l’écran est d’utiliser des transitions CSS. Ils sont faciles à utiliser. On spécifie quelles autres règles CSS animer. La définition de la règle cible, ainsi que la durée et l’assouplissement, permettent immédiatement des animations. C’est très pratique. Une fois en place, la seule chose nécessaire pour démarrer une animation est de changer la valeur de la règle cible. Voici ce que transition La règle ressemble au menu Hamburger:
Notez l’assouplissement spécifique utilisé. L’assouplissement cubique de Bézier ci-dessus provient des directives de l’interface utilisateur matérielle. C’est un peu plus percutant par rapport à l’ordinaire facilité assouplissement.
Voici à quoi pourrait ressembler un réglage fin dans les outils de développement
Le gestionnaire d’événements est la dernière étape de la création de l’animation. C’est ce qui rend le menu interactif. Le basculement de la classe «ouverte» déclenche automatiquement l’animation. La seule chose nécessaire est un endroit pour déclencher la transition d’état. L’élément SVG lui-même sert de lieu idéal pour insérer le gestionnaire.
Après avoir publié la première version de cet article, Dennis Lembrée a souligné que la version ci-dessus n’est pas accessible. L’accessibilité est importante, alors réparons les parties fondamentales. La bonne chose à faire est d’envelopper le menu dans un bouton et de déplacer le gestionnaire d’événements sur le bouton. Avec les boutons, une partie de ce qui est nécessaire pour que le menu soit accessible est gratuite. Le menu devient focusable et il active automatiquement la navigation dans les onglets du clavier.
Ajout d’un supplémentaire aria-label est également très utile. Il fournit des informations contextuelles aux utilisateurs qui dépendent de lecteurs d’écran.
Et voici le menu complet sur Codepen
C’est ça! Si vous êtes arrivé jusque-là , vous pouvez maintenant, espérons-le, en savoir un peu plus sur les menus Hamburger. Merci d’avoir lu et bonne chance avec vos animations!
À votre santé,
Mikael
