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 27 animations au





 

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]

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]

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]

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

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

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

A.K. 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]

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]

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

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]

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]

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]

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]

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]

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]

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]

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

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]