Caractéristiques

• Pas de rollover
• Les barres du haut et du bas sont expulsées, par moitié, à gauche et à droite
• La barre centrale est décomposée et forme la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [05-05-2022 / 05-05-2022]

Caractéristiques

• Animation coulante
• Mouvement presque circulaire des deux lignes extrêmes mais en sens inverse

Image cliquable pour voir l'exemple

Références

8 autres animations sur une seule page

Site web

[Créé / modifié] [07-11-2020 / 07-11-2020]

Caractéristiques

• Le trait haut croise le trait bas pour former la croix
• Le trait du milieu fabrique le cercle autour de la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-01-2021 / 07-01-2021]

Caractéristiques

• Pas de rollover
• Au clic l'icône fait un tour sur lui-même
• Un menu glisse par la gauche
• Même scénario mais à l'envers pour le retour
• Allemagne

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [03-03-2022 / 03-032022]

Caractéristiques

• CSS pur
• Les deux demi-barres se réunissent pour former une barre oblique, celle du milieu effectue une rotation de 45 degrés
• Pas de rollover
• Efficace et avec assez peu de code

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [11-06-2022 / 11-06-2022]

Caractéristiques

• 12 animations
• Réaction au clic de l'ensemble des icônes
• Transformations intéressantes

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [22-11-2021 / 22-11-2021]

Caractéristiques

• Réaction au survol
• Réaction au clic avec affichage du menu
• Réaction au survol des lignes de menu avec affichage d'un texte

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [19-03-2021 / 19-03-2021]

Caractéristiques

• Menu pour restauration rapide
• Rollover sur pain
• L'icône simule les traces de brulé du grill
• Au clic le pain se développe en tranches, à chaque tranche correspond une ligne de menu
• Bien vu !
• Nantes, France

Image cliquable pour voir l'exemple

Références

[Créé / modifié] [22-02-2022 / 22-02-2022]

Caractéristiques

• La barre du haut et celle du bas forment la croix
• La barre du milieu constitue progressivement le cercle qui entourre la croix
• Cinématiqe inverse au retour
• L'original est vendu 22 euros ! Que dit le droit ? Je suis complice, sûrement !
• Oklahoma, USA

Image cliquable pour voir l'exemple

Références

[Créé / modifié] [13-11-2021 / 13-11-2021]

Caractéristiques

• De l'icône vers la croix
• Avec deux changements de taille
• Choix judicieux

Image cliquable pour voir l'exemple

Références

[Créé / modifié] [20-01-2021 / 20-01-2021]

Caractéristiques

• CSS quasi pur
• 8 exemples sur une seule page
• Réaction au survol de la souris
• Différents types de transformation après le clic

Image cliquable pour voir l'exemple

Références

Une autre animation

[Créé / modifié] [17-11-2020 / 17-11-2020]

Caractéristiques

• CSS, Normalize.css
• Aucun rollover
• Au clic les trois lignes se réunissent en une seule
• Dans un second temps 2 lignes se croisent pour former la croix
• Rapport rendu/code extra
• Kansas City, Montana, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [11-06-2022 / 11-06-2022]

Caractéristiques

• Réagit au rollover
• De l'icône vers la croix par suppression de la ligne centrale

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-11-2020 / 07-11-2020]

Caractéristiques

• Superbe rotation à deux vitesses : La barre du bas disparait, celle du haut tourne doucement, celle du milieu fait un tour complet

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [17-11-2020 / 17-11-2020]

Caractéristiques

• 3 propositions avec tutoriel
• De l'icône vers la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-11-2020 / 07-11-2020]

Caractéristiques

• L'icône est composé de 9 carrés qui clignotent en décalage et avec fondu
• Au clic, 5 se figent
• Un texte juste en dessous précise si l'on est en mode aller ou retour
• Exemple intéressant
• 2 autres exemples sur la page

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [11-06-2022 / 11-06-2022]

Caractéristiques

• De l'icône vers la croix
• Rotation au clic

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-12-2020 / 21-12-2020]

Caractéristiques

• Le menu horizontal devient vertical en mode mobile
• Pas de rollover sur le bouton mais sur les lignes de menu
• Le menu recouvre la totalité de l'écran par glissement de la gauche
• Kenya

Image cliquable pour voir l'exemple

Références

Site de l'auteur

[Créé / modifié] [22-02-2022 / 22-02-2022]

Caractéristiques

• Tout vient intégralement du centre de la page : et le menu et le filtre sombre de protection
• Le menu s'affiche par glissement rapide jusqu'à atteindre la taille voulue
• La page est recouverte en totalité, par cercle excentriques, d'un filtre sombre
• Rollover sur le bouton
• Bien fichu

Image cliquable pour voir l'exemple

Références

Site de l'auteur

[Créé / modifié] [22-02-2022 / 22-02-2022]

Caractéristiques

• Une notice explicative pour chaque animation d'icône
• Réaction au clic, un seul au survol

Image cliquable pour voir l'exemple

Site de l'auteur

[Créé / modifié] [03-02-2021 / 03-02-2021]

Caractéristiques

• CSS pur
• Simple design
• J'aime beaucoup
• Lviv, Ukraine

Image cliquable pour voir l'exemple

Références

[Créé / modifié] [13-04-2022 / 13-04-2022]

Caractéristiques

• CSS pur
• Rollover: Les trois barres s'allongent et rétrécissent de manière décalée ce qui provoque un effet de 'vague'
• L'animation perdure tant que le rollover est sollicité
• Halifax, Canada

Image cliquable pour voir l'exemple

Références

[Créé / modifié] [03-03-2022 / 03-03-2022]

Caractéristiques

• CSS pur
• Pas de rollover
• La barre centrale est expulsée, genre boulet de canon, les deux autres font une pirouette pour fabriquer une croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [05-05-2022 / 05-05-2022]

Caractéristiques

• CSS pur
• Pas de rollover
• Retrait de la ligne médiane et éclatement de l'ensemble restant

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [24-01-2022 / 24-01-2022]

Caractéristiques

• CSS pur
• Solution originale
• Le rollover déclenche le mouvement, le clic la couleur
• Chino, Californie, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [24-01-2022 / 24-01-2022]

Caractéristiques

• Extension pour libérer un menu complet
• Le rond reste rond mais développe une barre de menu

Image cliquable pour voir l'exemple

Références

[Créé / modifié] [21-02-2021 / 21-02-2021]

Caractéristiques

• Pour le motif: Des trois traits à la croix
• Pour la forme: Du carré au rond
• Il faut cliquer sur la zone bleue absolument
• Brésil

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [08-11-2020 / 08-11-2020]

Caractéristiques

• CSS pur
• La barre du milieu disparait
• Les 2 autres barres se croisent très lentement
• Sympa !

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [17-01-2022 / 17-01-2022]

Caractéristiques

• CSS pur
• Une transformation paisible
• Des trois traits horizontaux à la croix par disparition, vers la gauche, du trait central
• Simple et efficace rien qu'en CSS, le top !

Image cliquable pour voir l'exemple

Références

Site de téléchargement

[Créé / modifié] [22-11-2021 / 22-11-2021]

Caractéristiques

• De l'icône à la croix et à la flèche
• Réaction douce au survol pour les 4

Image cliquable pour voir l'exemple

Références

[Créé / modifié] [03-02-2021 / 03-02-2021]

Caractéristiques

• Les deux traits du haut se retirent
• De celui du bas s'extirpe en sautant le mot 'menu'

Image cliquable pour voir l'exemple

Site web

[Créé / modifié] [17-11-2020 / 17-11-2020]

Caractéristiques

• Rotation gauche de l'icône
• Transformation des barres en points avec changement de couleur

Image cliquable pour voir l'exemple

Site web

[Créé / modifié] [13-11-2021 / 13-11-2021]

Caractéristiques

• 17 transformations
• Documentation d'utilistaion sur la même page
• Nickel

Image cliquable pour voir l'exemple

Références

Site de téléchargement

[Créé / modifié] [03-12-2020 / 03-12-2020]

Caractéristiques

• 6 transformations : Un best off
• Tranformations au survol
• Super

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [03-12-2020 / 03-12-2020]

Caractéristiques

• CSS, JS (très peu)
• Animation gluante
• Les traits haut et bas se fondent pour former le trait oblique (bas/gauche, haut/droit)
• Suède

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [02-02-2022 / 02-02-2022]

Caractéristiques

• CSS, JS, jQuery
• De l'icône vers la croix
• Police de caractères et animation : Comme si c'était fait à la main
• Helsinki, Finlande

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [08-11-2021 / 08-11-2021]

Caractéristiques

• CSS, Normalize.css, très peu de JS, jQuery
• Au rollover le cercle devient rouge
• Au clic les 3 barres se mettent à tourner et deviennent la croix
• L'intérieur du cercle devient rouge
• Inde

Image cliquable pour voir l'exemple

Références

[Créé / modifié] [04-01-2022 / 04-01-2022]

Caractéristiques

• CSS, JS, jQuery
• De l'icône vers la croix
• Changement de couleur au survol

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-12-2020 / 21-12-2020]

Caractéristiques

• CSS, JS, jQuery
• Pas de rollover
• Au clic, l'icône se transforme en croix
• La barre du haut et du bas deviennent rouge et se croisent, la barre centrale disparait

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [01-11-2021 / 01-11-2021]

Caractéristiques

• CSS, JS, Mdernizr.js, jQuery, Bootstrap
• Pas de rollover
• Au clic, l'icône se transforme en croix ou en flèche

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [13-10-2021 / 13-10-2021]

Caractéristiques

• CSS, JS
• Très très peu de Javascript
• Au survol, la ligne centrale se transforme dans le mot 'MENU', très explicite
• Au clic, le mot 'MENU', se change en 'CLOSE'

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [19-03-2021 / 19-03-2021]

Caractéristiques

• CSS, JS, jQuery
• Bologna, Italie
• Le même mouvement qu'un amortisseur de voiture sur une bosse
• Le mot 'menu' remplace une barre de l'icô et est éjecté par le bas au clic
• Bologne, Italie

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [22-01-2021 / 22-01-2021]

Caractéristiques

• CSS, JS, jQuery
• Pas de rollover
• Au clic les deux traits du haut et du bas se rejoignent pour former la croix
• Le trait du milieu est transformé en cercle et entourre la croix
• Orlando, Floride, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [02-02-2022 / 02-02-2022]

Caractéristiques

• CSS, JS, jQuery
• Rollover discret et progressif
• C'est du dessin : D'abord on gomme, ensuite on fait une croix
• Très sympa
• Roanoke, Virginie, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [11-02-2022 / 11-02-2022]

Caractéristiques

• CSS, JS, jQuery
• Rollover discret et progressif, comme précédemment
• Autres solutions de dessin d'icône
• Roanoke, Virginie, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [11-02-2022 / 11-02-2022]

Caractéristiques

• CSS, JS (très peu)
• Pas de rollover
• Au clic le trait du milieu devient point
• Le point tombe sur le trait du bas puis fonce sur le trait du haut pour les faire pivoter
• Joli retour à la normale
• Amman - Jordanie

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [02-02-2022 / 02-02-2022]

Caractéristiques

• CSS, jQuery
• Réaction au niveau du positionnement sur l'icône
• Suppression trait médiant
• Croisement des deux autres traits

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-11-2020 / 07-11-2020]

Caractéristiques

• CSS, JS, jQuery
• Effet 3D sur rollover
• Pittsburgh, Pennsylvanie, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [22-11-2021 / 22-11-2021]

Caractéristiques

• CSS, JS, jQuery
• La barre du milieu disparait
• La barre du haut se plie en forme de V, celle du bas en V à l'envers
• Tout cela très délicatement
• Sympa !

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [17-01-2022 / 17-01-2022]

Caractéristiques

• CSS, Normalize.css, JS, jQuery
• Effets d'ombre et d'épaisseur : Neumorphisme
• Beau rollover
• Tokyo, Japon

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [13-11-2021 / 13-11-2021]

Caractéristiques

• CSS, JS, jQuery
• Solution très maline
• Rollover sur l'icône hamburger et sur la croix avec, respectivement, l'affichage du mot 'menu' et du mot 'exit'
• Indiana, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [24-01-2022 / 24-01-2022]

Caractéristiques

• CSS, Sanitize.css, JS
• Pas de rollover
• La barre du milieu disparait, celle du bas pivote sur elle-même
• J'aime beaucoup
• Suède

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [05-05-2022 / 05-05-2022]

Caractéristiques

• CSS, JS
• Pas de rollover
• La gestion des couleurs apporte originalité et gaîté
• Columbus, Ohio, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-08-2022 / 21-08-2022]

Caractéristiques

• CSS, JS, AnimateAnything.js
• De l'icône vers la croix ou la flèche vers le haut
• Les animations sont vraiment sympa

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-12-2020 / 21-12-2020]

Caractéristiques

• CSS, JS
• 4 animations
• Un mode 'debug' étonnant

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-11-2020 / 07-11-2020]

Caractéristiques

• CSS, JS, Bootstrap 5
• Au clic un menu glissant s'affiche
• Le clic sur une ligne de menu, lance l'ouverture d'une fenêtre modale

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [17-01-2022 / 17-01-2022]

Caractéristiques

• CSS, JS, React
• 30 animations
• Composants du bouton Hamburger pour React.js avec changements d'état animés

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [13-11-2020 / 13x²-11-2020]

Caractéristiques

• CSS, JS, jQuery, Highlight.js
• 4 animations
• Plugin mmenu.js
• licence Creative Commons Attribution 4.0 International
• Documenttion et tutoriel

Image cliquable pour voir l'exemple

[Créé / modifié] [07-11-2020 / 07-11-2020]

Caractéristiques

• CSS, JS
• Séparation du trait et de la croix
• Effet d'éjection de la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-11-2020 / 07-11-2020]

Caractéristiques

• CSS, Normalize.css, JS, jQuery
• Élimination du trait m&dian
• Tour complet d'un trait abaissement de l'autre

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-11-2020 / 07-11-2020]

Caractéristiques

• CSS, JS, React.js
• Le trait haut se joint au trait bas pour former une branche de la croix
• Le trait du milieu, après un tour complet, constitue l'autre branche de la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-01-2021 / 07-01-2021]

Caractéristiques

• CSS, JS (très peu), jQuery
• Sélection des principaux icônes
• Les deux derniers sont avec rollover
• Japon

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [24-01-2022 / 24-01-2022]

Caractéristiques

• CSS, Normalize.css, très peu de JS
• 37 exemples qui réagissent au clic
• Au final on a une croix, une flèche, un signe, etc...
• Brooklyn, New-York, USA

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [22-01-2021 / 13-04-2022]

Caractéristiques

• CSS, JS, jQuery
• Le clic fait se développer une ligne... de menu, par exemple
• Lille

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [08-11-2021 / 08-11-2021]

Caractéristiques

• CSS, JS, jQuery
• Le résultat n'est pas toujours la croix, ce qui en fait l'interêt

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [01-11-2021 / 01-11-2021]

Caractéristiques

• CSS, JS, DrawSVGPlugin3js, Gsap.js
• Pour utiliser "DrawSVGPlugin3js" il faut être abonné
• L'icône et le texte glissent en même temps
• Le texte est écrit au fur et à mesure
• Jolie proposition
• Seattle, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [04-01-2022 / 04-01-2022]

Caractéristiques

• CSS, très très peu de JS
• Deux demi-traits : un en haut et un en bas
• Ils se joignent au trait du milieu pour former la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-11-2020 / 07-11-2020]

Caractéristiques

• CSS, très peu de JS
• Animation douce
• La demi ligne haute rejoint la basse pour former une branche de la croix
• C'est agréable, tellement c'est simple

Image cliquable pour voir l'exemple

Références

[Créé / modifié] [04-01-2022 / 04-01-2022]

Caractéristiques

• CSS, JS, jQuery
• Pour une boutique de restauration rapide
• Quand on clique sur le hamburger il se déplie
• Il y a un rollover sur chaque tranche avec un texte associé
• Leicester, Angleterre

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [13-04-2022 / 13-04-2022]

Caractéristiques

• CSS, Normalize.css, jQuery
• De l'icône vers la croix
• Couleur moutarde

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [07-11-2020 / 07-11-2020]

Caractéristiques

• CSS, Normalize.css, jQuery
• 6 solutions toutes plus utiles les unes que les autres
• Rollover sur chaque solution
• La Nouvelle-Orléans; Louisiane, USA

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-08-2022 / 21-08-2022]

Caractéristiques

• CSS, JS, jQuery
• Concept de menu à base d'icône hamburger
• Rollover
• Au clic le bas apparaît de manière oblique
• Australie

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [11-02-2022 / 11-02-2022]

Caractéristiques

• CSS, JS, jQuery
• Modernizr.js ne semble pas nécessaire ?????
• Effet de relief très réussi
• Attention : En mode desktop, il faut absolument cliquer sur une des deux barres
• Animation de saut pour aller à la croix
• Dommage que le curseur gêne autant visuellement !
• Cardiff, Pays de Galle

Image cliquable pour voir l'exemple

Références

Site web

Site de l'auteur

[Créé / modifié] [01-11-2021 / 01-11-2021]

Caractéristiques

• CSS, JS, Modernizr.js, jQuery.js
• Simple transformation de trois barres en une croix
• Changement de couleur du fond et de la croix

Image cliquable pour voir l'exemple

Références

Site web

[Créé / modifié] [21-02-2021 / 21-02-2021]