Icône hamburger : nouveaux usages. Création rapide de menu hamburger jQuery La magie est dans les détails

De Vitaly Rubtsov et n'a pas pu résister au désir de le réaliser.

Dans ce tutoriel, je vais vous montrer comment faire cela avec juste CSS, sans aucun JavaScript. Nous verrons donc quelques astuces CSS (et SCSS) qui nous permettront d'obtenir presque la même animation fluide que ce gif animé.

Voici un exemple de ce que nous allons faire :

balisage

Commençons par la structure HTML que nous allons utiliser. Voir les commentaires pour mieux comprendre.

Styles SCSS initiaux

Ajoutons maintenant un style de base pour obtenir le look que nous voulons. Le code est assez simple.

/* Styles de base */ * ( box-sizing: border-box; ) html, body ( margin: 0; ) body ( font-family: sans-serif; background-color: #F6C390; ) a ( text-decoration: aucun ; ) .container ( position : relative ; marge : 35 px auto 0 ; largeur : 300 px ; hauteur : 534 px ; couleur d'arrière-plan : #533557 ; débordement : masqué ; )

Opération de commutation

Avant de commencer à créer le reste de l'interface, ajoutons une fonction de basculement pour passer facilement d'un état à un autre.

Le code HTML dont nous avons besoin est déjà en place. Et le style qui le fait fonctionner ressemble à ceci :

// Masquer la case à cocher #toggle ( display: none; ) // Style pour l'état "ouvert" lorsque la case est cochée #toggle:checked ( // Tout élément dont vous devez changer le style lors de l'ouverture du menu va ici avec un sélecteur ~ // Styles pour ouvrir le menu de navigation, par exemple & ~ .nav ( ) )

Créer un état fermé

Pour rendre l'état fermé, nous devons convertir les éléments de menu en lignes pour obtenir l'icône du hamburger. Il existe plusieurs façons d'obtenir une telle transformation. Nous avons décidé de procéder ainsi :

Et voici le code qui l'implémente.

$transition-duration : 0,5 s ; // Affiche les éléments de navigation sous forme de lignes qui composent l'icône hamburger. nav-item ( position : relative ; display : inline-block ; float : left ; clear : both ; color : transparent ; font-size : 14px ; letter-spacing : - 6.2px ; hauteur : 7 px ; hauteur de ligne : 7 px ; text-transform : majuscule ; white-space : nowrap ; transform : scaleY(0.2) ; transition : $transition-duration, opacity 1s ; // Ajouter une largeur pour la première ligne & :nth-child(1) ( letter-spacing: -8px; ) // Ajoute de la largeur pour la deuxième ligne &:nth-child(2) ( letter-spacing: -7px; ) // Paramètres pour les éléments commençant par le quatrième & :nth-enfant(n + 4) ( letter-spacing: -8px; margin-top: -7px; opacity: 0; ) // Récupération des lignes pour l'icône hamburger &:before ( position: absolue; contenu: "" ; haut : 50 % ; gauche : 0 ; largeur : 100 % ; hauteur : 2 px ; couleur d'arrière-plan : #EC7263 ; transformation : translateY(-50%) scaleY(5); transition : $transition-duration ; ) )

Veuillez noter qu'ici nous n'avons placé que les styles de base pour les éléments de navigation, qui sont les plus importants. Vous pouvez trouver le code complet sur Github.

Créer un menu ouvert

Pour créer un menu ouvert, nous devons restaurer les éléments de navigation des lignes aux liens de texte normaux, ainsi qu'apporter un certain nombre de modifications mineures. Voyons comment faire :

$transition-duration : 0,5 s ; #toggle:checked ( // Ouvrir & ~ .nav ( // Restaure les éléments de navigation à partir des "lignes" dans l'icône du menu. nav-item ( color: #EC7263; letter-spacing: 0; height: 40px; line-height: 40px ; margin-top : 0 ; opacity : 1 ; transform : scaleY(1); transition : $transition-duration, opacity 0.1s; // Masque les lignes &:before ( opacity : 0; ) ) ) )

Magie dans les détails

Si nous regardons de plus près le gif, nous verrons que tous les éléments du menu ne sont pas déplacés en même temps, mais selon un motif en damier. Nous pouvons également le faire en CSS ! Fondamentalement, nous devons sélectionner chaque élément (en utilisant :nth-child ) et définir la valeur de transition-delay pour s'estomper. Il s'agit assurément d'un travail récurrent. Et si nous avions plus d'éléments ? Ne vous inquiétez pas, nous pouvons améliorer les choses avec un peu de magie SCSS :

$articles : 4 ; $délai de transition : 0,05 s ; .nav-item ( // Définit un délai pour les éléments de navigation lors de la fermeture de @for $i de 1 à $items ( &:nth-child(#($i)) ( $delay: ($i - 1) * $transition - delay ; transition-delay : $delay ; &:before ( transition-delay : $delay ; ) ) ) )

Notez qu'avec ce code, nous obtiendrons le comportement de progression souhaité pour l'animation de fermeture. Nous devons calculer $delay , qui est légèrement différent pour l'animation d'ouverture, pour récupérer la transition par étapes. Comme ça:

$delay : ($items - $i) * $transition-delay ;

Conclusion

Nous voici avec notre menu fantaisie ! Nous avons également inclus des éléments factices comme dans le gif animé et vous pouvez voir le fichier .

Nous avons donc créé un menu CSS simple et fonctionnel uniquement. Cependant, si vous ne souhaitez pas utiliser le système de basculement CSS, il peut être parfaitement remplacé par quelques lignes de JavaScript avec peu d'effort.

Nous espérons que vous avez apprécié ce tutoriel et que vous l'avez trouvé utile !

Nous n'avons fait que la mise en page jusqu'à présent.

5. Téléchargez la bibliothèque jquery-3.3.1.min.js

Nous nous connectons à notre HTML document avant la balise fermante corps deux fichiers, dont l'un est encore vide.

6. Créer un événement en JS

Écrivez le code suivant dans un fichier script.js

$(fonction())(
$(".menuBurger").on("clic", fonction())(
$(".menu").slideToggle(200, fonction())(
if($(this).css("afficher") === "aucun")(
$(this).removeAttr("style");
}
});
});
});

Nous n'entrerons pas dans le détail JS code, bornons-nous à des commentaires généraux. Je peux conseiller, pour ceux qui sont intéressés par la programmation sur JS

Cette ligne $(".menuBurger").on("clic", fonction())( suit un événement sur un clic sur un élément avec la classe .menuBurger.

$(".menu").slideToggle(200, fonction())( ici la fonction est appliquée au menu lui-même slideToggle(), qui développe ou réduit alternativement les éléments sélectionnés sur la page en 200 millisecondes.

$(this).removeAttr("style");- supprime de en ligne modes affichage : aucun ;

Cliquez maintenant menu hamburgers se développe et se replie, mais il y a un problème, lors de l'expansion du menu, il déplace le contenu principal du site vers le bas, mais c'est correct s'il est au-dessus du contenu. Dans le même temps, la vitesse de chargement des pages en pâtit, notamment sur l'Internet mobile.

6. Développer le menu en haut du contenu

Ce problème est résolu à l'aide du positionnement du menu.

Principalement CSS le code doit être ajouté

Menu (
position : relative ;
}

Dans la requête multimédia : .menu (
arrière-plan : #eee ;
position : absolue ;
}

Après, menu hamburgers s'étendra au-dessus du contenu principal. C'est comme cela devrait être.

Menu hamburger en CSS

1. Désactiver et supprimer tous les scripts

2. Insérez dans HTML fichier entre les balises div et ul ligne de code

3. Remplacez l'étiquette div avec classe .menuBurger sur le étiqueter

4. Lien saisie de l'identifiant avec attribut pour étiquette de l'autre côté #menuCSS

Par conséquent, en cliquant sur l'icône menu hamburgers, une coche apparaît dans la case à cocher.

5. Ajouter une pseudo-classe à la requête média vérifié

#menuCSS:coché (
affichage : aucun ;
}

Cela signifie que lorsque vous cliquez sur l'icône, la case à cocher est cochée, mais elle est masquée à l'écran, seule l'icône est visible. L'idée est que si la case n'est pas cochée, le menu est fermé, et si elle est cochée, le menu est développé. L'événement avec l'ouverture et la fermeture du menu est suspendu à l'état de la case à cocher.

6. Cacher saisir v CSS

#menuCSS (
affichage : aucun ;
}

7. Modifiez le code au paragraphe 5, voir ci-dessus dans l'article pour ce qui suit

#menuCSS:vérifié + .menu (
bloc de visualisation;
}

Si le lien entre étiqueter et saisir #menuCSS coché (vérifié), le menu est développé. C'est toute la magie menu hamburgers fonctionne à l'état pur CSS et si vous y ajoutez une animation fluide, il n'y a aucune différence avec le menu sur JS vous ne sentirez pas.

Essayez de réduire le navigateur et vous verrez clairement comment cela fonctionne menu hamburger css

Conclusion

Les deux options fonctionnent. Menu sur JS, disons - correct, du point de vue de l'utilisation du code. Menu sur CSS- c'est une "béquille", une sorte de "manifestation d'ingéniosité", bien adaptée à ceux qui ne veulent pas comprendre JS et va l'appliquer uniquement sur ses projets. Il n'y a pas de "béquilles" pour les sites sur mesure, je recommande fortement de faire une mise en page adaptée pour une utilisation ultérieure JS, d'autres spécialistes.

Vous êtes probablement déjà fatigué de lire des articles et d'écouter constamment diverses discussions sur trois lignes courtes d'un menu de hamburgers. Est-ce une mauvaise technique de conception d'interface utilisateur ? Ou bon ? Ce post n'est pas comme ça - il ne jugera pas si ce menu est bon ou mauvais. L'essentiel est que je ne pense pas que ce soit la meilleure solution de conception de toute façon. Mais le menu hamburger a aussi ses atouts, notamment lorsqu'il est utilisé en design mobile, dans des conditions d'espace restreint. Alors, que pouvons-nous faire? Acceptez simplement le menu hamburger tel qu'il est, malgré toutes les lacunes, et passez à autre chose ? De nombreux sites et applications semblent avoir accepté cela. Et je pense que je peux faire mieux.

Et puis deux choses se sont produites qui m'ont fait changer d'avis. Tout d'abord, je suis tombé sur . Ceci est un article qui aide vraiment à comprendre les implications de l'utilisation d'un menu hamburger. En particulier, les sites avec un tel menu souffrent d'une sérieuse diminution de l'engagement des utilisateurs. Un examen de ces statistiques a commencé à changer mon opinion.

L'incident suivant s'est produit alors que je regardais un collègue essayer d'utiliser une nouvelle application Web dotée d'un tel menu. C'était un développeur qui connaissait très bien l'interface du menu hamburger, mais lorsqu'il s'agissait d'utiliser l'application pour ses besoins, il a demandé à voix haute : "Comment puis-je y arriver ?". Remarquez, c'est l'une des personnes les plus intelligentes que je connaisse, et il n'a même pas pensé à toucher l'icône du menu hamburger. Si quelqu'un d'aussi intelligent a du mal à naviguer, qu'est-ce que cela dit de l'utilisateur type ? Mon opinion a enfin acquis une justification solide.

Trouver une solution

Voilà, assez parlé des raisons de mon incrédulité face au pouvoir du menu hamburger - il est temps de parler de la solution. Tout d'abord, j'ai examiné les avantages spécifiques de l'utilisation du menu hamburger :

Évolutivité: c'est probablement le principal avantage et la principale raison pour laquelle tant de sites et d'applications le choisissent. Vous pouvez mettre beaucoup d'éléments de navigation derrière une petite icône.
Précision: cela va de pair avec l'évolutivité, mais ce n'est toujours pas la même chose. Les concepteurs veulent créer des designs concis et soignés, laissant suffisamment d'espace pour le contenu principal. L'utilisation d'un menu hamburger donne une impression de simplicité visuelle qui plaît à tout designer.

Et si nous voulons créer une alternative au menu hamburger, cela doit en quelque sorte résoudre les problèmes qui y sont associés :

Clarté: Il devrait être possible de trouver facilement des éléments de navigation, en particulier pour les utilisateurs novices.
Participation: L'interface doit fournir des conseils et des commentaires expliquant ce que l'utilisateur peut faire avec le produit et quand il est approprié d'utiliser certaines fonctionnalités.

Le plus dur : mobile

J'ai décidé de commencer par le problème le plus difficile et de voir si ma solution fonctionne pour les conceptions mobiles. Après avoir réfléchi à de nombreuses idées, je suis arrivé à la conclusion que le menu de la barre d'onglets iOS est l'une des meilleures solutions pour les interfaces mobiles. Beaucoup de gens ont essayé de faire défiler la barre d'onglets (pour accueillir plus de cinq options) ou d'ajouter "plus" à la navigation - quelque chose comme Plushkin, qui a une pièce supplémentaire qui se remplira rapidement de bric-à-brac. De plus, ces deux options ne répondent toujours pas à l'exigence principale - la clarté, la visibilité de toutes les possibilités manquent. Alors, que peut-on faire avec le menu des onglets pour résoudre ce problème ?

Ma solution consiste à combiner le hamburger et la barre d'onglets en une seule approche. Le résultat est une barre d'onglets qui ouvre un ensemble d'options pour chaque élément de menu.

J'ai créé une application de test de productivité d'équipe pour illustrer ma démarche en action. En utilisant cette méthode, l'utilisateur peut voir clairement les principales fonctions et façons d'utiliser le produit. Et au lieu d'être bombardé d'une liste complète d'éléments de menu cachés derrière une icône de hamburger, l'utilisateur voit quelques options relatives à l'onglet sur lequel il a cliqué. Cela rend la navigation plus facile à comprendre et à digérer, tout ce dont vous avez besoin est toujours à portée de main, permet à l'utilisateur de voir la hiérarchie des applications.

Un autre avantage de cette conception est la possibilité d'utiliser des notifications contextuelles. Dans le cas du menu hamburger, vous n'avez qu'un seul endroit pour afficher ces notifications. Si vous vous en tenez à la disposition de la barre d'onglets, vous pouvez donner des conseils à l'utilisateur dans n'importe lequel des éléments de menu sélectionnés.

Bien sûr, la plus grande victoire de cette approche est l'évolutivité. Oui, vous êtes toujours limité à cinq catégories, mais ça va. Honnêtement, je pense que n'importe quel site peut classer ses options en cinq catégories si le concepteur réfléchit judicieusement à la navigation. En effet, dans chacune de ces catégories, il peut y avoir cinq ou six alinéas supplémentaires.
Au total, il y a 30 options de navigation possibles sans se sentir surchargé pour l'utilisateur et sans occuper tout l'espace de l'écran.

Application aux tablettes

L'intégration d'une telle barre d'onglets dans les tablettes, telle quelle, semblait étrange. Les tablettes sont beaucoup plus larges et utiliser la même interface utilisateur que les appareils mobiles semblait aussi ridicule qu'un adolescent dans les vêtements qu'il a dépassés il y a longtemps. Alors je suis parti dans l'autre sens. Au lieu de placer la barre d'onglets en bas, je l'ai placée sur le côté. Cela s'est avéré plus pratique en termes d'utilisation de l'espace à l'écran et avait l'air très naturel. De plus, de nombreux utilisateurs tiennent la tablette par le côté, il ne s'agit donc que de la zone cible pour le toucher du doigt.

Et qu'en est-il du bureau ?

Préparez-vous… menu déroulant. C'est vrai - essayez cette approche sur une interface de bureau et vous serez confronté à une réalité indéniable : cette option n'est pas nouvelle du tout. Le menu coulissant existe depuis des années et presque tout le monde (même votre mère) sait comment cela fonctionne. C'est la beauté de cette approche - rien de nouveau.

Divulgation complète

Je ne sais pas comment appeler ce truc. Insérer un tiroir ? Ou TABurger (TAB « onglet » + burger) ? De plus, je ne sais pas si quelqu'un a déjà créé une solution similaire. Vu la simplicité d'un tel menu, je ne peux pas admettre que j'ai été le premier. Je sais que quelques applications utilisent des menus coulissants sur certains boutons d'onglet (comme Tweetbot), mais ils sont généralement implémentés comme un accès rapide aux fonctionnalités pour les utilisateurs avancés, et non dans le but d'augmenter la hiérarchie de navigation. Si vous avez un tel exemple, faites le moi savoir dans les commentaires.
Peu importe qu'un tel menu soit nouveau ou inventé depuis longtemps. Ce qui compte, c'est s'il s'agit d'une solution de navigation meilleure et plus créative que le menu hamburger. Arrêtez de vous dire "Ce site cool a un menu comme celui-ci, donc ce doit être le meilleur" ou "Tout le monde le fait, donc c'est bien". La conception mérite une approche meilleure et plus réfléchie.
MISES À JOUR
Collin Ebergardt a noté sur Twitter que la même interface utilisateur est implémentée dans Windows Phone. Je suis moi-même un utilisateur de Windows Phone, et il a raison. Bien que ce type d'interaction ne soit utilisé dans Windows Phone que pour l'option "plus" de la barre d'onglets.

James Perih a donné un autre exemple sur Twitter. Jetez un œil au AHTabBarController créé par Arthur Hemmer.

L'icône du hamburger est partout. Partout autour de nous. Dans les applications Web, sur les sites mobiles et de bureau, dans les logiciels. Cette icône à trois lignes omniprésente est maintenant si courante qu'on a presque l'impression qu'elle est uniquement associée à un menu de navigation. Mais est-ce?

Récemment, les discussions sur l'efficacité de l'icône du hamburger ont atteint de nouveaux sommets. Des articles d'éminents designers et plusieurs sites dont The Atlantic, TechCrunch, The Next Web et Nielsen Norman Group concluent qu'il s'agit d'un anti-pattern UX, une icône tendance et facile à mettre en œuvre qui est une régression par rapport aux alternatives plus simples et plus expressives. . Mais anti-pattern ou pas, l'utilisation de l'icône s'est tellement développée qu'elle est presque incontournable sur la plupart des sites web, notamment sur les petits écrans.

Compte tenu de ma position de designer au sein de l'équipe m.booking.com et de notre utilisation de cette icône pour afficher un menu coulissant, j'ai décidé d'enquêter sur cet objet. Et j'ai commencé par étudier l'origine de l'insigne, pour essayer de comprendre son cheminement vers l'infamie.

Cela semble prometteur. Mais même si l'icône est classique et existe depuis toujours, les concepteurs de sites Web ont été moins cohérents dans leur utilisation. L'icône a été utilisée pour les listes, le glissement et la réorganisation, l'alignement, etc. Peut-être que cette mauvaise utilisation explique sa critique en tant qu'icône de menu. Peut-être en raison de sa large diffusion et de son utilisation variée, cette icône a perdu sa capacité à transmettre une seule métaphore et, à son tour, déroute les utilisateurs.

Toute cette histoire m'a fait poser des questions : « Avons-nous tort, et tout le monde a raison ? Cela cause-t-il des désagréments à nos utilisateurs ? Y a-t-il des gens qui comprennent réellement ce que sont ces trois petites lignes sur notre site ?

Les lecteurs réguliers de ce blog ne seront pas surpris d'apprendre que notre prochaine étape consistait à poser ces questions sous la forme d'un test A/B. Comme tout le reste, l'icône du hamburger a été exposée à nos nombreux clients qui, à travers l'interaction avec le menu, devaient déterminer si cette icône était la meilleure solution. À ce moment-là, j'avais lu suffisamment d'articles et de données d'information pour être sûr que l'absence de consensus ou d'autres résultats n'était pas due au comportement des acheteurs pour lesquels le design était en cours de développement. J'ai décidé de suivre la méthode décrite James Foster, auquel beaucoup se réfèrent, y compris l'un de nos meilleurs spécialistes mobiles - Luc Wroblewski.

Nous avons précédemment testé plusieurs emplacements et styles d'icônes (avec une bordure, sans bordure, avec une icône, différentes couleurs, etc.), mais jamais testé le mot "Menu" - en raison des difficultés liées à notre désir de tester en quarante -une langues prises en charge par nous. Cependant, nous avons avancé en trouvant des traductions avec l'aide de notre équipe d'experts linguistiques et en lançant un test :

Notre icône de menu hamburger originale se trouve à gauche du titre et avec une barre de séparation blanche à droite.

Le mot "Menu" à l'intérieur d'un bloc avec une bordure blanche aux coins arrondis, est également aligné à gauche.

Nous avons lancé une expérience pour l'ensemble de notre base d'utilisateurs. De plus, compte tenu de l'importance et de l'omniprésence de cet élément d'interface utilisateur, nous espérions qu'il ne faudrait pas longtemps pour tester nos millions de clients à travers le monde, dans toutes les langues prises en charge et sur un grand nombre d'appareils.

Alors, quel est le résultat final ? Le mot a-t-il gagné le fast-food, comme dans l'expérience de James Foster, ou le petit pain à l'escalope l'emportera-t-il ?

résultats

Lors de cette expérimentation, le remplacement de l'icône par le mot "Menu" n'a pas eu d'impact significatif sur le comportement de nos utilisateurs. Grâce à notre immense base d'utilisateurs, nous pouvons affirmer avec une très grande probabilité que, pour les visiteurs de Booking.com en particulier, l'icône hamburger remplit son rôle au même titre que la version de description textuelle.

Bien sûr, nous ne pouvons pas extrapoler ces données à tout. Dans certains pays, dans certaines langues ou certains appareils, cela peut avoir fonctionné mieux ou moins bien. Mais à l'échelle mondiale, on peut conclure que le « hamburger » a été trop ridiculisé. Dans l'ensemble, c'était aussi reconnaissable que le mot "Menu". Dans l'esprit de la gestion de la promotion du design, nous devrions probablement envisager d'autres options, et peut-être essayer d'ajouter du fromage, une tranche de bacon et des frites à notre icône de hamburger, mais pour l'instant, nous sommes heureux d'annoncer que notre "ami à trois lignes" est collant partout. Son emplacement, sa forme, sa taille, sa position et sa couleur réels sont, bien sûr, soumis à de futurs tests.

Sans aucun doute, c'est une leçon pour nous tous sur l'essence des tests A/B. Vous ne testez jamais les éléments de l'interface utilisateur, le modèle ou la fonctionnalité dans son ensemble. Vous testez ces choses avec des publics d'utilisateurs très spécifiques dans des scénarios spécifiques et spécifiques. Ce qui fonctionne pour Booking.com peut ne pas fonctionner pour vous ou vos utilisateurs. C'est l'une des raisons pour lesquelles nous avons fait nos tests A/B. Les conclusions d'autres experts, les données d'autres sites ou les hypothèses concoctées dans un pub en mangeant un hamburger resteront non prouvées tant qu'elles ne seront pas testées sur nos clients et sur notre plateforme.

Ne vous laissez pas confondre par notre propre métaphore, mais c'est comme une bonne recette de hamburger. Même si vous écrivez exactement tous les ingrédients pour moi, vous vous retrouvez avec un hamburger complètement différent. Ceci, bien sûr, sera affecté par la qualité de la viande disponible sur le marché, la farine utilisée pour le pain et mille autres facteurs. Pour nous personnellement, l'idée est bonne si elle est bonne pour Booking.com. Si nous pouvons le reproduire sur notre site, et si cela fonctionnera pour tous nos clients.

Notre opinion

Vous devez toujours tester vos idées et voir ce que les données vous disent et quelles questions se posent. Mon conseil? Prenez une bouchée et voyez ce qui se passe.

Vous avez sûrement vu sur de nombreux sites un bouton sous la forme d'une icône à trois bandes horizontales, rappelant un hamburger. Dans la plupart des cas, sur les résolutions d'écran grandes et moyennes, ce bouton est masqué et n'apparaît que sur les petits écrans.

Ce bouton cache les éléments du menu de navigation, l'idée est qu'à une certaine largeur d'écran, en cliquant sur l'icône, l'utilisateur agrandit lui-même le menu s'il en a besoin. Si ce n'est pas nécessaire, il procède immédiatement à la visualisation du contenu, sans être distrait par le menu, car il est masqué.

La partie active de cette tâche, à savoir développer et réduire des éléments menu hamburgers peut être mis en œuvre au moyen JS utiliser la bibliothèque jQuery ou sur propre CSS. Ici, je dirai immédiatement que dans CSS cela se fait d'une "manière de béquille" sur case à cocher-ah, plus tard je vous expliquerai ce que c'est.

Menu hamburgers en JS

1. Nous composons le menu de navigation supérieur habituel avec un paragraphe de la partie contenu du site

Contenu principal du site

2. Insérer une icône hamburger dans le menu de navigation

Sur le site iconfinder.com trouvez l'icône souhaitée, changez la couleur en celle souhaitée (Modifier l'icône), télécharger au format SVG, ouvrez-le dans le navigateur, copiez le code de l'inspecteur Web.

Collez le code copié ci-dessus à la place du texte "Menu".

À ce stade, sur les résolutions de bureau, le menu ressemble à ceci, SVG Nous avons caché l'icône en écrivant le code suivant.

MenuBurger(
affichage : aucun ; /* icône hamburger masquée */
}

3. Passez à la requête média

Sur une petite largeur d'écran, de zéro à 530 pixels. Nous devons faire le contraire, montrer l'icône menu hamburgers et masquer tous les éléments de menu d'affilée.

Écran @media et (largeur maximale : 530 px) (
.menu(
affichage : aucun ; /* les éléments du menu sont cachés */
arrière-plan : #f1f2f4 ;
position : absolue ;
}

Menu li (
flottant : aucun /* éléments de menu en colonnes */
}

MenuBurger(
affichage : bloc en ligne /* icône hamburger visible */
}
}

4. Développez le menu hamburger

Que faire avant d'ouvrir menu hamburgers? Commenter temporairement CSS code de requête multimédia /* affichage : aucun ; */ et transformer le menu horizontal en menu vertical. Pour cela, annulez l'action flotter, ajoutez le code suivant à la requête multimédia.