Animation icône hamburger

Présentation

L'icône hamburger est destiné aux sites mobiles et sert à ouvrir et à fermer un menu, en règle générale, glissant. Il est un petit peu représentatif de votre personnalité : Délicat, sportif, complexe, etc...

Dans un premier temps ceux en 'CSS pur' puis ceux avec du Javascript.

En mode mobile vous avez accès à chaque catégorie par un insert au milieu droit de l'écran

Je vous propose 52 animations au



Sur d'autres pages

[Menu CSS] [Menu JS] [Search box]

 

Animation d'icône hamburger en CSS pur

Ainalem Mikael

Caractéristiques

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

Image cliquable pour voir l'exemple

icone hamburger coulant en CSS3 pur

Références

8 autres animations sur une seule page

Site web

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

Ainalem Mikael

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

icone hamburger coulant en CSS3 pur

Références

Site web

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

Bermingham Jeffrey

Caractéristiques

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

Image cliquable pour voir l'exemple

12 animations d'icone hamburger

Références

Site web

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

Coven Alex

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

icone hamburger coulant en CSS3 pur

Références

Site web

Site de l'auteur

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

East Braden

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

De l'icone hamurger a la crois entouree d'un cercle

Références

Site web

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

Elphick Rosalie

Caractéristiques

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

Image cliquable pour voir l'exemple

animation et changement de couleur

Références

Site web

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

Emran Ahmad

- Réaction et transformation

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

animation avec transformation du hamburger en mot souligne

Références

Une autre animation

Site web

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

Fattah Hafiz

- Burger animé / Icône de menu

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

menu fixe

Références

Site web

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

Gareth alias Nissacjg

- Rotation à deux vitesses
- Superbe !

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

animation avec transformation du hamburger en mot souligne

Références

Site web

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

Grafikart

- Burger animé / Icône de menu

Caractéristiques

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

Image cliquable pour voir l'exemple

icone hamburger animé en CSS3 pur

Références

Site web

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

Iker Aaron

- Pourquoi faire compliqué quand on paut faire aussi simple !

Caractéristiques

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

Image cliquable pour voir l'exemple

animation et changement de couleur

Références

Site web

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

Koman Kasper

- Librairie SCSS
- Pourquoi faire compliqué quand on paut faire aussi simple !

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

Librairie SCSS d'animation d'icone hamburger

Site web

Site de l'auteur

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

Naderi Pejman

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

eclatement des deux barres ecterieures

Références

Site web

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

Narvin

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

rollover declenche le mouvement

Références

Site web

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

Sai Ram Akhil

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

animations douces et progressives d'icone hamburger

Références

Site web

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

Sala De Estudo

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

du trait a la croix et du carre au rond

Références

Site web

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

Sam Chen Code

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

animation hamburger avec disparition et croisement des barres

Références

Site web

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

Simic Antonija

- 4 exemples en pur CSS

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

animations douces et progressives d'icone hamburger

Références

Site web

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

SinghHimalaya - Inde

- Retrait et apparition

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

animation avec transformation du hamburger en mot souligne

Site web

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

Singh Himalaya 2

- Transformation de l'icône hamburger en points de suspension

Caractéristiques

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

Image cliquable pour voir l'exemple

animation avec transformation du hamburger en suspension

Site web

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

Stix

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

animation d'icone hamburger simple et efficace

Références

Site de téléchargement

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

Suh Jonathan

- Librairie CSS, Fichiers SCSS disponibles

Caractéristiques

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

Image cliquable pour voir l'exemple

librairie d'animations d'icone hamburger avec toutes les transitions possibles

Références

Site de téléchargement

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

Vineeth T-R

- CSS pur

Caractéristiques

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

Image cliquable pour voir l'exemple

des exemples d'icone hamburger en pure CSS

Références

Site web

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

 

Animation d'icône hamburger avec du JS

Alajoki Jaakko

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

animation facon ecrit a la main

Références

Site web

Site de l'auteur

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

Akshay

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

rotation et transformation

Références

Site web

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

Azhar Noureddine

Caractéristiques

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

Image cliquable pour voir l'exemple

animation et changement de couleur

Références

Site web

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

Bell Andy - Cheltenham, UK

- Tout simplement

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

animation, changement de couleur pour l'icone hamburger

Références

Site web

Site de l'auteur

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

Blode Matthew - Melbourne, Australie

- Très lourd en dépendances

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

animation et changement de couleur

Références

Site web

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

Canfield Ryan

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

animation et changement de couleur

Références

Site web

Site de l'auteur

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

Cantelli Davide

- Menu élastique

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

biliotheque d'animations

Références

Site web

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

Fabre Steven

- Icône hamburger animé

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

suppression ligne médiane puis rotation pour croisement

Références

Site web

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

Feely Bennett

Caractéristiques

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

Image cliquable pour voir l'exemple

hamburger avec effet 3F sur rollover

Références

Site web

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

Html e Css Pro

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

animation hamburger avec transformation

Références

Site web

Site de l'auteur

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

Iwanami Hilo

Caractéristiques

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

Image cliquable pour voir l'exemple

neumorphisme et hamburger

Références

Site web

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

Lavery Kyle

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

icone hamburger avec le mot menu et le mot exit

Références

Site web

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

Main Matthew

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

animations et transitions

Références

Site web

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

Martinius Tamino

- Hamburger Menu Animations

Caractéristiques

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

Image cliquable pour voir l'exemple

animations hamburger basées sur la fuidité

Références

Site web

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

Mc Lean Hugh

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

animations hamburger basées sur react.css et react.js

Références

Site web

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

Mir Neamul Karim

- Hamburger Menu Animations

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

animations hamburger basées sur react.css et react.js

Références

Site web

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

MMenu.Js - Tuto

- Plugin hamburger en Javascript

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

plugin gratuit pour menu hamburger

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

Mulligan Ryan

- Salto arrière

Caractéristiques

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

Image cliquable pour voir l'exemple

animation avec séparation du trait et de la croix

Références

Site web

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

M. Smith Nicholas

- Icône de menu / burger animé

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

animation par rotation et suppression

Références

Site web

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

Nandi Rudrangshu

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

icone hamburger avec react.js

Références

Site web

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

Naoya

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

selection animation d'icone hamburger

Références

Site web

Site de l'auteur

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

Petrek Kurt

- La totale - Brooklyn, NY, États-Unis

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...

Image cliquable pour voir l'exemple

biliotheque d'animations

Références

Site web

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

Robart Sabine

Caractéristiques

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

Image cliquable pour voir l'exemple

animation burger pour menu

Références

Site web

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

Roberts Rosa

- 12 propositions

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

animations hamburger toutes differentes

Références

Site web

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

Roblewsky Craig

- Animation mixte

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

animation mixte, icone et texte

Références

Site web

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

Rosario Jose

- Rotation et concaténation

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

animation par réunion pour former la croix

Références

Site web

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

Shaikh Ajmal

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

animations douces et simplissime

Références

Site web

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

Smith Matthew

Caractéristiques

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

Image cliquable pour voir l'exemple

animation : De l'icône à la croix

Références

Site web

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

Thomson Jack

- Belle proposition avec saut et relief

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

animation hamburger avec un effet relief

Références

Site web

Site de l'auteur

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

Xu Jun

- Simple transformation

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

icone hamburger, transformation avec changement de couleur

Références

Site web

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