Catégories
Astuces et Design

Le menu 🍔 – UX Collective

Un guide étape par étape pour créer un menu Hamburger en SVG et CSS

Mikael Ainalem
menus hamburger

TTLe 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 débattent 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 apparaît toujours 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:

les deux Ă©tats du menu hamburger

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.

Tracer une ligne

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 elle 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 hard-core 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. Il est, en théorie, 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.

Vidéo de dessiner un hamburger

C'Ă©tait trop rapide pour toi? Si oui, voici la recette

  1. Tracez une ligne droite sur la partie supérieure de l'écran
  2. Déplacez les extrémités de la ligne pour la rendre large de 60 pixels. Centrez verticalement la ligne autour de y = 29.
  3. RĂ©glez la largeur de trait sur 6 pixels
  4. Dupliquez la ligne et déplacez la copie au centre du document SVG. À y = 47 px, le centre de la ligne copiée atterrit à 50 px. La moitié de la largeur de trait est de 3 pixels. Soit 47 + 3 = 50.
  5. Créez une autre copie et placez la troisième ligne à y = 68px. Le fait de 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.

…
// top line
// middle line
// bottom line
…

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 plume est à nouveau utile.

Vidéo de l'extension d'une ligne

Une fois la ligne supérieure en place, il est temps de faire la même procédure pour la ligne inférieure. Étant donné que tout le nécessaire 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.

Compléter le modèle

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:

...
// top line
// middle line
// bottom line

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.

body {
align-items: center;
display: flex;
justify-content: center;
height: 100vh;
margin: 0
}

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.

Trouver la longueur des 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 207px 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.

Une excellente façon 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:

  1. Les valeurs qui font réapparaître le hamburger.
  2. 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 La règle prend une plage de valeurs qui décrivent les tirets et les espaces. 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:

transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);

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 focalisable et il active automatiquement la navigation par onglet clavier.

Ajout d'un supplémentaire aria-label est également très utile. Il fournit des informations contextuelles aux utilisateurs qui utilisent des lecteurs d'écran.

Et voici le menu complet sur Codepen

Source complète sur Codepen

C'est tout! Si vous avez atteint ce stade, vous pouvez maintenant en espérer en savoir un peu plus sur les menus Hamburger. Merci d'avoir lu et bonne chance avec vos animations!

À votre santé,
Mikael

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *