Icône de menu animé. Créez rapidement un menu de hamburgers à l'aide de jQuery. Créer un menu ouvert

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

Dans ce tutoriel, je vais vous montrer comment procéder en utilisant uniquement CSS, sans aucune utilisation de JavaScript. Nous verrons donc quelques astuces CSS (et SCSS) qui nous permettront de réaliser des animations presque aussi fluides que ce gif animé.

Voici un exemple de ce que nous allons faire :

Commençons par la structure HTML que nous utiliserons. Voir les commentaires pour une meilleure compréhension.

Contrôle Histoire Statistiques Paramètres

Ajoutons maintenant un style de base pour obtenir le look souhaité. 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: none; ) .container ( position : relative ; marge : 35px auto 0 ; largeur : 300px ; hauteur : 534px ; couleur d'arrière-plan : #533557 ; débordement : caché ; )

Avant de commencer à créer le reste de l'interface, nous ajouterons des fonctionnalités de basculement pour passer facilement d'un état à un autre.

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

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

Pour passer à l'état fermé, nous devons convertir les éléments de menu en lignes pour obtenir une icône de hamburger. Il existe plusieurs manières de réaliser cette transformation. Nous avons décidé de procéder de cette façon :

Et voici le code qui implémente cela.

$durée de transition : 0,5 s ; // Afficher les éléments de navigation sous forme de lignes qui composent l'icône du hamburger.nav-item ( position : relative ; affichage : bloc en ligne ; flotteur : gauche ; clair : les deux ; couleur : transparent ; taille de police : 14 px ; espacement des lettres : - 6,2px ; hauteur de ligne : 7px ; espace blanc : nowrap ; scaleY(0.2); transition : $transition-duration, opacity 1s ; largeur de la deuxième ligne &:nth-child(2) ( letter-spacing: -7px; ) // Paramètres pour les éléments à partir de la quatrième & :nth-child(n + 4) ( letter-spacing: -8px; margin -top: -7px; opacity: 0; ) // Récupère les lignes pour l'icône du hamburger &:before ( position: absolue; contenu: ""; top : 50%; width: 100%; background-color: #EC7263; traduireY (-50%) transition : $transition-durée ;

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

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 procéder :

$durée de transition : 0,5 s ; #toggle:checked ( // Ouvrir & ~ .nav ( // Restaurer les éléments de navigation à partir des « lignes » dans le menu icon.nav-item ( couleur : #EC7263 ; espacement des lettres : 0 ; hauteur : 40px ; ligne- hauteur : 40px ; margin-top : 0 ; opacité : 1 ; transition : $transition-duration, opacity 0.1s; // Masquer les lignes &:avant ( opacité : ) ) )

Si l'on regarde le gif de plus près, on constate que tous les éléments du menu ne sont pas déplacés en même temps, mais en damier. Nous pouvons aussi le faire en CSS ! Fondamentalement, nous devons sélectionner chaque élément (en utilisant :nth-child ) et définir la valeur du délai de transition pour qu'elle augmente progressivement. C'est définitivement un travail répétitif. Et si nous avions plus d’éléments ? Ne vous inquiétez pas, nous pouvons tout améliorer en utilisant un peu de magie SCSS :

$éléments : 4 ; $délai de transition : 0,05 s ; .nav-item ( // Définit le 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 - délai ; délai de transition : $délai ; &:avant ( délai de transition : $délai ; ) ) )

Notez qu'avec ce code, nous obtiendrons le comportement d'étape souhaité pour l'animation de clôture. Nous devons calculer $delay , 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 ;

Nous en avons fini avec notre menu raffiné ! Nous avons également inclus des éléments factices comme dans le gif animé et vous pouvez le voir.

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

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

Vous en avez probablement déjà assez de lire des articles et d'écouter constamment diverses discussions sur trois courtes lignes du menu des hamburgers. Est-ce une mauvaise technique de conception d’interface utilisateur ? Ou pas mal ? Cet article est différent – ​​il ne jugera pas si ce menu est bon ou mauvais. Le fait est que je ne pense pas que ce soit la meilleure décision en matière de conception, d’une manière ou d’une autre. Mais le menu hamburger a aussi ses atouts, notamment lorsqu'il est utilisé dans un design mobile, dans des conditions d'espace limité. Alors que pouvons-nous faire ? Accepter simplement le menu hamburger tel qu'il est, malgré toutes les lacunes, et continuer votre vie ? De nombreux sites et applications semblent avoir accepté cela. Et je crois que je suis capable du meilleur.

Et puis deux choses se sont produites qui m’ont fait changer d’avis. Tout d'abord, je suis tombé sur . Il s'agit d'un article qui aide vraiment à comprendre les implications de l'utilisation d'un menu hamburger. En particulier, les sites proposant de tels menus subissent une sérieuse diminution de l’engagement des utilisateurs. Un examen de ces statistiques vient de commencer à changer mon opinion.

L'incident suivant s'est produit alors que j'observais un collègue essayer d'utiliser une nouvelle application Web dotée d'un tel menu. Il s'agissait d'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 demandait à haute voix : « Comment puis-je y arriver ? Attention, 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 sur l’utilisateur type ? Mon opinion a enfin acquis une base solide.

Cela suffit sur les raisons de mon incrédulité quant 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 d’un 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 placer de nombreux é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 souhaitent créer des designs concis et soignés, en laissant suffisamment d'espace pour le contenu principal. L’utilisation d’un menu de hamburgers donne une impression de simplicité visuelle qui séduit tout designer.

Et si nous voulons créer une alternative au menu hamburger, cela doit d’une manière ou d’une autre résoudre les problèmes qui y sont associés :

• Compréhension : les éléments de navigation doivent pouvoir être facilement trouvés, en particulier par ceux qui utilisent le produit pour la première fois.
• Engagement : 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.

J'ai décidé de commencer par le problème le plus difficile et de voir si ma solution fonctionnerait pour les conceptions mobiles. Après avoir réfléchi à une tonne d'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 qu'elle s'adapte à plus de cinq options) ou d'ajouter « plus » à la navigation - quelque chose comme Plyushkin, qui dispose d'un espace supplémentaire qui se remplira rapidement de déchets. En outre, ces deux options ne répondent toujours pas à l’exigence principale : il manque de clarté et de visibilité sur toutes les possibilités. Alors, que pouvez-vous 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 mon approche en action. Grâce à cette méthode, l’utilisateur peut voir clairement les principales fonctions et utilisations du 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 plusieurs options liées à 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 et 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 d’un menu hamburger, vous ne disposez que d’un seul endroit pour afficher ces notifications. Si vous vous en tenez à une disposition de barre d'onglets, vous pouvez fournir des conseils à l'utilisateur sur n'importe lequel des éléments de menu qu'il sélectionne.

Bien entendu, le plus grand avantage de cette approche est l’évolutivité. Oui, vous êtes toujours limité à cinq catégories, mais c'est une bonne chose. 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. Après tout, dans chacune de ces catégories, il peut y avoir cinq ou six sous-éléments supplémentaires.
Au total, ce sont 30 options de navigation possibles sans sensation de surcharge pour l'utilisateur et sans occuper tout l'espace de l'écran.

Intégrer une telle barre d’onglets dans les tablettes semblait étrange. Les tablettes sont beaucoup plus polyvalentes et utiliser la même interface utilisateur que les appareils mobiles semblait aussi gênant qu'un adolescent portant des vêtements dont il était devenu trop grand depuis longtemps. J'ai donc emprunté un chemin différent. 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 semblait très naturel. De plus, de nombreux utilisateurs tiennent la tablette sur le côté, c'est donc la zone cible du toucher du doigt.

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 du tout nouvelle. Les menus coulissants existent 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 : elle n'a rien de nouveau.

Je ne sais pas comment appeler cette chose. Curseur d'incrustation ? Ou TABurger (TAB « tab » + 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 supporte pas de penser que j'étais le premier. Je sais que quelques applications utilisent des menus coulissants sur certains boutons d'onglet (comme Tweetbot), mais elles sont généralement conçues comme un accès rapide aux fonctionnalités pour les utilisateurs expérimentés, et non comme un moyen de créer une 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 est de savoir s’il s’agit d’une solution de navigation meilleure et plus créative qu’un menu hamburger. Arrêtez de vous dire « Ce site sympa a ce menu, donc il doit être le meilleur » ou « Tout le monde le fait, donc il doit être correct ». Le design mérite une approche meilleure et plus réfléchie.
MISES À JOUR
Collin Eberhardt 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 » dans la barre d'onglets.

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

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

Nous connectons deux fichiers à notre document HTML avant la balise body de fermeture, l'un d'eux est encore vide.

Nous écrivons le code suivant dans le fichier script.js

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

Nous n'analyserons pas le code JS en détail ; nous nous limiterons à des commentaires généraux. Je peux le recommander à ceux qui sont intéressés par la programmation en JS

Cette ligne $(".menuBurger").on("click", function())( surveille l'événement de clic sur un élément avec la classe .menuBurger .

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

$(this).removeAttr("style");

- supprime display: none des styles en ligne ;

6. Extension du menu au-dessus du contenu

Ce problème est résolu en utilisant le positionnement du menu.

Dans le code CSS principal, vous devez ajouter
Menu (
}

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

position : absolue ;

Menu hamburger en CSS

1. Désactivez et supprimez tous les scripts

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

3. Remplacez la balise div par la classe .menuBurger avec l'étiquette

De ce fait, lorsque vous cliquez sur l'icône du menu hamburger, une coche apparaît dans la case à cocher.

5. Ajoutez la pseudo-classe cochée à la requête multimédia

#menuCSS : coché (
affichage : aucun ;
}

Cela signifie que lorsque vous cliquez sur l'icône, une coche est placée dans la case à cocher, 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, alors le menu est fermé, et si elle est cochée, alors le menu est développé. L'événement d'ouverture et de fermeture du menu dépend de l'état de la case à cocher.

6. Masquer l'entrée en CSS

#menuCSS (
affichage : aucun ;
}

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

#menuCSS : coché + .menu (
affichage : bloc ;
}

Si le lien entre l'étiquette et l'entrée #menuCSS est coché, alors le menu est développé. C'est toute la magie, le menu hamburger fonctionne en CSS pur et si vous y ajoutez une animation fluide, vous ne ressentirez aucune différence par rapport au menu JS.

Essayez de réduire la taille de votre navigateur et vous verrez clairement comment fonctionne le menu hamburger CSS

Les deux options fonctionnent. Le menu en JS, disons, est correct du point de vue de l'utilisation du code. Un menu en CSS est une « béquille », une sorte de « manifestation d'ingéniosité », bien adaptée à ceux qui ne veulent pas comprendre JS et vont l'utiliser uniquement sur leurs projets. Pour les sites Web sur mesure, il n'y a pas de « béquilles » ; je recommande fortement de créer des mises en page adaptées à une utilisation ultérieure de JS par d'autres spécialistes.

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 omniprésente à trois lignes est si courante de nos jours qu'il semble qu'elle soit uniquement associée au menu de navigation. Mais est-ce vrai ?

Récemment, les discussions sur l’efficacité de l’icône du hamburger ont atteint de nouveaux sommets. Des articles rédigés par 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-modèle UX, d'une icône tendance et facile à mettre en œuvre qui est une régression du plus simple, plus alternatives expressives. Mais anti-modèle ou pas, l'utilisation de l'icône s'est tellement développée qu'elle est presque devenue un incontournable sur la plupart des sites Web, en particulier 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'explorer cet objet. J'ai commencé par étudier les origines de l'icône pour tenter de comprendre son cheminement vers l'infamie.

Cela semble prometteur. Mais même si l’icône est un classique et existe depuis toujours, les concepteurs de sites Web ont été moins cohérents dans son utilisation. L'icône a été utilisée pour les listes, le glissement et la réorganisation, l'alignement, etc. Peut-être que cette utilisation abusive 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, confond les utilisateurs.

Toute cette histoire m’a fait poser des questions : « Avons-nous vraiment 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 signifient ces trois petites lignes sur notre site Web ? »

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 était soumise à l'influence de nos nombreux clients qui, en interagissant avec le menu, devaient déterminer si l'icône était la meilleure solution. À ce moment-là, j'avais lu suffisamment d'articles et d'informations pour être sûr que l'absence de consensus ou les résultats différents n'étaient pas dus au comportement des clients pour lesquels la conception était développée. J'ai décidé de suivre la méthode décrite James Foster, qui a été référencé par de nombreuses personnes, y compris l'un de nos meilleurs spécialistes mobiles - Luc Wroblewski.

Nous avons déjà testé plusieurs emplacements et styles d'icônes (avec bordure, sans bordure, avec icône, différentes couleurs, etc.), mais nous n'avons jamais testé le mot « Menu » en raison de la complexité de notre désir de tester en quarante- une langue, prise en charge par nous. Cependant, nous sommes allés de l’avant, avons trouvé les traductions avec l’aide de notre équipe d’experts linguistiques et avons effectué le test :

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

Le mot « Menu » à l'intérieur d'un bloc avec un cadre blanc aux coins arrondis, également aligné à gauche.

Nous avons lancé une expérience sur l'ensemble de notre base d'utilisateurs. Et étant donné la popularité et l'omniprésence de cet élément d'interface utilisateur, nous espérions qu'il ne prendrait pas trop de temps pour le tester auprès de millions de nos clients à travers le monde, dans toutes les langues prises en charge et sur une grande variété d'appareils.

Alors quel est le résultat final ? Le mot a-t-il vaincu la restauration rapide, comme ce fut le cas dans l'expérience de James Foster, ou le petit pain et la côtelette l'emporteront-ils ?

Bien entendu, nous ne pouvons pas extrapoler ces données à tout. Dans certains pays, sur certaines langues ou sur certains appareils, cela a pu fonctionner mieux ou moins bien. Mais à l’échelle mondiale, on peut conclure que le « hamburger » a été trop moqué. Dans l’ensemble, il était aussi reconnaissable que le mot « Menu ». Dans l'esprit de gérer les progrès de la conception, 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 placardé partout. Son emplacement réel, sa forme, sa taille, sa position et sa couleur sont, bien entendu, un sujet de tests futurs.

C’est sûrement une leçon pour nous tous sur la nature des tests A/B. Vous ne testez jamais les éléments de l'interface utilisateur, le modèle ou la fonction dans son ensemble. Vous testez ces éléments sur un public d'utilisateurs très spécifique 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 effectué nos tests A/B. Les découvertes d’autres experts, les données d’autres sites ou les hypothèses formulées dans un pub en mangeant un hamburger ne seront pas prouvées tant qu’elles ne seront pas testées auprès de nos clients et sur notre plateforme.

Sans vouloir nous perdre dans notre propre métaphore, c'est comme une recette pour un bon hamburger. Même si vous notez tous les ingrédients exactement après moi, vous obtiendrez un hamburger complètement différent. Bien entendu, cela dépendra de la qualité de la viande disponible sur le marché, de la farine utilisée pour le pain et de milliers d’autres facteurs. Pour nous personnellement, l’idée est bonne si elle est bonne pour Booking.com. Si nous pouvons le répéter sur notre site Internet, et si cela fonctionne pour tous nos clients.

Simple, fonctionnelle, intuitive et mémorable, comme n’importe quel panneau routier, l’icône du hamburger est devenue une véritable tendance l’année dernière et fait partie intégrante de toute conception de site Web et d’application mobile moderne.

Cette icône simple imite l'apparence d'une liste de menus, idéale pour les appareils à petit écran et les sites Web où les visuels sont importants et où la navigation doit être laissée de côté. Il s'agit d'une solution très efficace et viable qui répond aux exigences du monde moderne.

Comme tout autre élément d'interface, l'icône du hamburger peut présenter quelques écarts par rapport à la version originale, en fonction des besoins de chaque projet individuel.

Selon le projet et le thème, l'icône du hamburger peut prendre différentes formes qui complètent le design ou peuvent devenir un élément distinctif propre.

La collection d'aujourd'hui comprend 20 variantes différentes de l'icône du hamburger.

L'icône du hamburger du designer Dave Games dégage immédiatement beaucoup d'énergie chaleureuse. Le style dessin animé ajoute du côté ludique et ne crée que les émotions les plus positives. Vous pouvez utiliser en toute sécurité une telle icône sur la plupart des interfaces illustrées modernes.

Cette icône de vague océanique a été conçue par Mat Walker. Elle se sentira bien sur divers projets dédiés à la mer. Le bleu clair comme couleur principale et la bordure qui l'entoure rendent ce badge exclusif.

Une mise en œuvre propre, lumineuse et pleine d'esprit permettra à cette conception de fonctionner comme une icône de menu sur les sites de cuisine. Dans ce cas, l'interface recevra une agréable touche artistique.

Le concepteur propose 10 versions intéressantes d'icônes de hamburgers, réalisées avec âme. La série couvre différents types de burgers : un au fromage, un autre au bacon, un autre à la dinde et bien d'autres. Si vous disposez d’un site internet ou d’une application mobile dédiée à un fast-food, alors ils vous seront certainement utiles. Ils sont si intéressants visuellement qu’ils peuvent trouver leur place dans presque tous les thèmes.

Et ce projet représente un hamburger réaliste en vecteur. Le bouton de fermeture est réalisé en forme de frites, prenant la forme d'un « X », avec ou sans sauce. Il s'agit d'une solution créative qui peut ajouter de l'exotisme à la conception de la page.

Le site officiel de Star Wars comprend une icône de hamburger intéressante qui tourne. Chaque ligne est divisée en deux parties pour obtenir le vecteur de réflexion de la lumière des épées laser. La solution améliore l'impression générale du site et renforce la marque.

Burger Menu de Peter Twaury est une version magnifiquement illustrée de l'icône. La caractéristique clé de cette icône est le choix de couleurs qui imitent le petit pain coupé et la galette de viande.

La série propose diverses options de hamburger, qui sont implémentées à l'aide d'un style de ligne. Vous y trouverez un double hamburger, un hamburger au fromage et laitue, un sandwich ouvert et plusieurs autres. Trouver la solution parfaite pour votre interface soignée et plate sera facile pour ajouter de la saveur et du style.

L'artiste présente trois versions amusantes du bouton : un hamburger classique, un cheeseburger et un hot dog. Chacun est basé sur une ou deux couleurs, ce qui le rend adapté à une variété de petites interfaces. Ici, la couleur crée le bon look pour le sandwich.

L'artiste propose une petite animation qui comprend une seule icône de menu, et plusieurs transitions douces qui accompagnent la transformation en un « X » régulier (bouton de fermeture). Des effets spéciaux se produisent lorsque vous passez la souris ou cliquez.

Contrairement à la plupart des exemples ci-dessus, cet exemple montre une manipulation habile du poids plutôt que de la couleur. Les lignes du haut et du bas sont plus audacieuses que celles du milieu et créent le look « hamburger » parfait. L'artiste a accompli avec succès la tâche.

L'animation du menu de l'icône ninja d'Andrew Kovardakov diffère de la plupart des boutons hamburger et offre une solution intéressante et extraordinaire, avec une connotation mystérieuse et attrayante. Ici, chaque ligne est un ninja dans un vecteur.

Et cette icône est une illustration d’un hamburger avec de la laitue et du fromage. Il peut ajouter du piquant à n’importe quelle interface ennuyeuse. Une excellente solution pour un site Web de restaurant ou de café.

Il s'agit d'un article dans lequel vous pouvez trouver des discussions intéressantes sur l'icône de menu tendance. Il est marqué d'une image qui montre trois variantes du bouton hamburger. La première est une illustration plate haut de gamme, la seconde est une icône colorée à trois lignes et la troisième est une version monochrome du deuxième design - le choix le plus populaire parmi les designers.

Le GIF montre les transitions fluides entre l’état initial de cette icône minimaliste et élégante et son état final. Puisque l’animation part de la ligne du bas, elle est plus courte que les autres.

Le menu de hamburgers de Liam Spradlin ressemble à un ensemble de marque-pages scolaires. Cette implémentation est audacieuse et quelque peu grossière. Cette icône est immédiatement visible, cependant, il peut être difficile de trouver l'environnement approprié pour elle.

Jusqu'à présent, nous avons examiné les icônes séparément, mais elles fonctionnent bien avec les mots, surtout lorsque le mot est « Menu ». Même si cela peut sembler exagéré, ils ont l’air sophistiqués ensemble. Les lignes ultra fines de 1 px de large utilisées dans ce cas s'emboîtent comme des pièces de puzzle.

Le projet prouve qu’une icône de hamburger peut paraître plus lumineuse et plus attrayante une fois encadrée. C'est un excellent choix pour les petits appareils où une telle icône sera pratique pour la navigation tactile.

Le designer affiche une icône simple et élégante à trois lignes qui subit diverses métamorphoses pour devenir une croix ou une flèche. L'animation comprend plusieurs solutions qui peuvent être utiles pour n'importe quel projet.

Résultats

À première vue, il peut sembler qu'une chose aussi petite qu'une icône de menu ne mérite pas qu'on y prête beaucoup d'attention. Mais si vous faites preuve d'un peu d'imagination, vous pouvez en faire une sorte de point fort de votre interface. Surtout si les développeurs commencent à jouer avec sa signification et utilisent des techniques artistiques pour la rendre plus non conventionnelle et plus accrocheuse.