Menu en CSS3 et Html5

Présentation

Pour donner à votre site un air agréable et professionnel voici des menus basés sur le CSS (en CSS3), avec ou sans Javascript. Ces menus sont tous 'responsive', c'est à dire qu'ils s'adaptent à tous les formats d'écran.

Je vous propose 52 menus au

  1. Adnan Topal - SlimMenuHorizontal (JS, jQuery)
  2. AdtileHorizontal (JS)
  3. Alchemist DevilishVertical (JS, jQuery)
  4. Bebber LucasHorizontal (CSS pur)
  5. Blode Matthew#Vertical (JS)
  6. Brumm KyleVertical (JS)
  7. By IvanHorizontal (JS, jQuery)
  8. Chris Yee - PushyVertical (JS, jQuery)
  9. Claudio HolandaVertical (CSS pur)
  10. Cody HouseHorizontal (JS, jQuery)
  11. Cody House 2Vertical (JS, jQuery)
  12. Cody House 3Vertical (JS, jQuery)
  13. Cody House 4Vertical (JS, jQuery)
  14. Css Menu Maker#Horizontal (JS)
  15. Css ScriptVertical (JS)
  16. Css Script 2Vertical (JS)
  17. Css Script 3Vertical (CSS pur)
  18. David BushellHorizontal (JS)
  19. DeBroux AndrewHorizontal (JS, jQuery)
  20. Design DrasticFixe (JS, jQuery)
  21. Design ShackHorizontal (CSS pur)
  22. Dubroeucq VincentHorizontal (CSS pur) Nouveauté
  23. Eduard L#Vertical (CSS pur)
  24. Iclanzan - SlinkyVertical (JS, jQuery)
  25. Inspirational PixelsHorizontal (JS, jQuery)
  26. jQuery ScriptHorizontal (JS, jQuery)
  27. jQuery Script 2Horizontal (JS, jQuery)
  28. jQuery Script 3Horizontal (JS, jQuery)
  29. jQuery Script 4Horizontal (JS, jQuery)
  30. Khurshi Ahsan #Horizontal (CSS pur)
  31. Kirsch Christophe Bouton fixe (JS, jQuery)
  32. Loncarek Mario#Recouvrant (JS, jQuery)
  33. Multi-level Push MenuVertical (JS, jQuery)
  34. Murray MarkHorizontal (JS, jQuery)
  35. Osvaldas ValutisHorizontal (JS, jQuery)
  36. Pietrusky TimHorizontal (CSS pur)
  37. Pietrusky Tim 2Horizontal (CSS pur)
  38. Pure CssHorizontal (CSS pur)
  39. Pure Css 2Horizontal (CSS pur)
  40. Pure Css 3Horizontal (CSS pur)
  41. Ramirez Edwin#Horizontal (Css pur)
  42. Responsive NavHorizontal (JS)
  43. Santos Eva#Horizontal (Css, JS)
  44. Shak DanielFixe (CSS pur)
  45. Sullivan PaulFixe (CSS pur)
  46. The Pete DesignPleine page (JS, jQuery)
  47. Turton TabithaHorizontal (CSS pur)
  48. TympanusHorizontal (JS, jQuery)
  49. Tympanus 2Horizontal (JS)
  50. Van Oijen PaulFixe (JS)
  51. Vinial AntoineHorizontal (JS)
  52. XukanuHorizontal (JS)

Adnan Topal - SlimMenu

Voir le menu

Les caractéristiques

  • Menu fixe, poussant par le haut
  • 2 états : Bureau; Tablette et mobile
  • Bootstrap
  • Javascript, jQuery
menu Adnan Topal
Site de référence

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

positionneen début de page

Adtile

Voir le menu

Les caractéristiques

  • Barre de navigation fixe, toujours visible
  • 2 états : Bureau et tablette; Mobile
  • JavaScript
Adtile.me menu CSS3
Site de référence

[Créé / modifié] [27-03-2016 / 27-03-2016]

positionneen début de page

Alchemist Devilish

Voir le menu

Les caractéristiques

  • Menu fixe, poussant par la gauche de manière circulaire
  • 1 état multi supports
  • Javascript, jQuery
  • Normalize
menu Adnan Topal
Site de référence

[Créé / modifié] [15-04-2019 / 15-04-2019]

positionneen début de page

Bebber Lucas

Voir le menu

Les caractéristiques

  • Bouton de navigation fixe, toujours visible
  • 1état pour tous les supports
  • Pur CSS
  • 4 possibilités d'affichage
Adtile.me menu CSS3
Site de référence

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

positionneen début de page

Blode Matthew

Web designer & developer à Melbourne, Australia

Voir le menu

Les caractéristiques

  • Bouton de navigation fixe, toujours visible
  • Un seul état : Mobile
  • JavaScript
BlodeMatthew menu CSS3
Site de référence

[Créé / modifié] [04-12-2018 / 04-12-2018]

positionneen début de page

Brumm Kyle

Developer à Chicago

Voir le menu

Les caractéristiques

  • Bouton de navigation fixe, toujours visible
  • Un seul état tous supports
  • JavaScript, Modernizr
BlodeMatthew menu CSS3
Site de référence

[Créé / modifié] [13-02-2019 / 13-02-2019]

positionneen début de page

By Ivan

Voir le menu

Les caractéristiques

  • Menu fixe avec Rotation 3D
  • 1 état multi supports
  • JavaScript
  • jQuery
ByI van menu CSS3
Site de référence

[Créé / modifié] [03-09-2018 / 03-09-2018]

positionneen début de page

Chris Yee - Pushy

Voir le menu

Les caractéristiques

  • Menu poussant par la gauche
  • 1 état multi supports
  • JavaScript, jQuery
  • normalize.css
ChrisYee.ca menu CSS3
Site de référence

[Créé / modifié] [14-01-2017 / 14-01-2017]

positionneen début de page

Claudio Holanda

Voir le menu

Les caractéristiques

  • Transition par la gauche
  • 3 états : Bureau; Tablette; Mobile
  • Pur CSS
ClaudioHolanda menu CSS3
Site de référence

[Créé / modifié] [14-01-2017 / 14-01-2017]

positionneen début de page

Cody House

Voir le menu

Les caractéristiques

  • Menu pleine page, poussant par la gauche
  • 1 état multi supports
  • JavaScript, jQuery
  • Modernizr
codyhouse.co menu CSS3
Site de référence

[Créé / modifié] [03-09-2018 / 03-09-2018]

positionneen début de page

Cody House 2

Voir le menu

Les caractéristiques

  • Menu fixe déroulant vertical
  • 1 état multi supports
  • JavaScript, jQuery
  • Modernizr
  • Icons: Nucleoapp.com
codyhouse.co menu CSS3
Site de référence

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

positionneen début de page

Cody House 3

Voir le menu

Les caractéristiques

  • Menu fixe vertical
  • 2 états : Bureau; Tablette et mobile
  • JavaScript, jQuery
  • Modernizr
codyhouse.co menu CSS3
Site de référence

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

positionneen début de page

Cody House 4

Voir le menu

Les caractéristiques

  • Menu fixe vertical
  • 2 états : Bureau et tablette; Mobile
  • JavaScript, jQuery
  • Modernizr
codyhouse.co menu CSS3
Site de référence

[Créé / modifié] [28-02-2019 / 28-02-2019]

positionneen début de page

Css Menu Maker

9 menus responsive

Voir le menu

Les caractéristiques

  • Menu fixe déroulant par le haut
  • 2 états : Bureau; Tablette et mobile
  • JavaScript, jQuery
menu de CssMenuMaker
Site de référence

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

positionneen début de page

Css Script

Voir le menu

Les caractéristiques

  • Menu fixe sortant par la gauche
  • 2 états : Bureau, tablette; Mobile
  • JavaScript
menu de cssscript.com
Site de référence

[Créé / modifié] [04-11-2018 / 04-11-2018]

positionneen début de page

Css Script 2

Voir le menu

Les caractéristiques

  • Menu fixe déroulant par le haut
  • 2 états : Bureau; Tablette et mobile
  • Pure CSS
menu de cssscript.com
Site de référence

[Créé / modifié] [04-11-2018 / 04-11-2018]

positionneen début de page

Css Script 3

Voir le menu

Les caractéristiques

  • Menu vertical gauche
  • 2 états : Bureau; Tablette et mobile
  • Javascript
  • Normalize
menu de cssscript.com
Site de référence

[Créé / modifié] [04-11-2018 / 04-11-2018]

positionneen début de page

David Bushell

Voir le menu

Les caractéristiques

  • Menu fixe poussant par la gauche
  • 2 états : Bureau; Tablette et mobile
  • JavaScript
  • Modernizr
menu de DBushell
Site de référence

[Créé / modifié] [07-12-2014 / 07-12-2014]

positionneen début de page

DeBroux Andrew

Voir le menu

Les caractéristiques

  • Adaptation d'un menu de 'tympanus.net'
  • Menu à 3 niveaux
  • 2 états : Bureau, tablette; Mobile
  • JavaScript, jQuery
  • Modernizr
codyhouse.co menu CSS3
Site de référence

[Créé / modifié] [05-06-2019 / 05-06-2019]

positionneen début de page

Design Drastic

Voir le menu

Les caractéristiques

  • Hamburger circular menu effect using CSS and Javascript
  • Menu fixe
  • 1état
  • Javascript et jQuery
DesignDrasticCom menu
Site de référence

[Créé / modifié] [09-04-20197 / 09-04-20197]

positionneen début de page

Design Shack

Voir le menu

Les caractéristiques

  • Menu fixe
  • 3 états : Bureau; Tablette; Mobile
  • Javascript
  • Html5shiv pour < IE9
DesignShack menu
Site de référence

[Créé / modifié] [18-01-2017 / 18-01-2017]

positionneen début de page

Dubroeucq Vincent

Voir le menu

Les caractéristiques

  • Menu horizontal devenant vertical
  • 2états : Bureau; Tablette, mobile
  • Pur CSS
  • Avec tutoriel
Dubroeucq Vincent
Site de référence

[Créé / modifié] [28-06-2019 / 28-06-2019]

positionneen début de page

Eduard Leonardo

Voir le menu

Les caractéristiques

  • Menu fixe déroulant horizontal
  • 1 état multi supports
  • Pur CSS
ClaudioHolanda menu CSS3
Site de référence

[Créé / modifié] [14-01-2017 / 14-01-2017]

positionneen début de page

Iclanzan - Slinky

Voir le menu

Les caractéristiques

  • Menu fixe qui s'empile en haut et en bas
  • 1 état multi supports
  • Javascript, jQuery
DesignShack menu
Site de référence

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

positionneen début de page

Inspirational Pixels

Voir le menu

Les caractéristiques

  • Avec tutoriel
  • Menu horizontal devenant vertical
  • 2états : Bureau, tablette; Mobile
  • Javascript, jQuery
DesignShack menu
Site de référence

[Créé / modifié] [13-03-2019 / 13-03-2019]

positionneen début de page

jQuery Script

Voir le menu

Les caractéristiques

  • Menu fixe déroulant horizontal
  • 2 états : Bureau; Tablette et mobile
  • Javascript, jQuery
  • Bootstrap
jQueryScript.net menu
Site de référence

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

positionneen début de page

jQuery Script 2

Voir le menu

Les caractéristiques

  • Menu fixe déroulant horizontal
  • 2 états : Bureau; Tablette et mobile
  • Javascript, jQuery
  • Normalize
DesignShack menu
Site de référence

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

positionneen début de page

jQuery Script 3

Voir le menu

Les caractéristiques

  • Menu en trois dimensions
  • 1état
  • Fonction créée par Hakim El Hattab (http://hakim.se, @hakimel)
DesignShack menu
Site de référence

[Créé / modifié] [26-12-2018 / 26-12-2018]

positionneen début de page

jQuery Script 4

Voir le menu

Les caractéristiques

  • Bouton toujours visible, poussant en diagonale
  • 1 état multi supports
  • Javascript, jQuery
DesignShack menu
Site de référence

[Créé / modifié] [18-04-2019 / 18-04-2019]

positionneen début de page

Khurshi Ahsan

Voir le menu

Les caractéristiques

  • Menu horizontal devenant vertical
  • 2 états : Bureau; Tablette et mobile
  • CSS pur
KhurshiAhsan
Site de référence

[Créé / modifié] [11-12-2018 / 11-12-2018]

positionneen début de page

Kirsch Christophe

Voir le menu

Les caractéristiques

  • Bouton de navigation fixe, toujours visible
  • Déploiement circulaire
  • 1état tous supports
  • Javascript, jQuery
KirschChristophe
Site de référence

[Créé / modifié] [28-02-2019 / 28-02-2019]

positionneen début de page

Loncarek Mario

Voir le menu

Les caractéristiques

  • Menu recouvrant
  • 2 états : Bureau; Tablette et mobile
  • Javascript
  • Normalize
DesignShack menu
Site de référence

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

positionneen début de page

Multi-level Push Menu

Voir le menu

Les caractéristiques

  • Menu poussant par la gauche
  • 1 seul état pour tous les supports
  • Bootstrap
  • Javascript, jQuery
  • Modernizr
MultiLevelPushMenu
Site de référence

[Créé / modifié] [10-12-2018 / 10-12-2018]

positionneen début de page

Murray Mark

Voir le menu

Les caractéristiques

  • Menu glissant par le haut et poussant par la diagonale gauche/haute
  • 1 seul état multi supports
  • JavaScript, jQuery
MurrayMark
Site de référence

[Créé / modifié] [26-12-2018 / 26-12-2018]

positionneen début de page

Osvaldas Valutis

Voir le menu

Les caractéristiques

  • Menu horizontal devenant vertical
  • 2 états : Bureau; Tablette et mobile
  • JavaScript, jQuery
  • Normalize.css
OsvaldasValutis
Site de référence

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

positionneen début de page

Pietrusky Tim

Tim Pietrusky est le cofondateur de Synoa et il adore passer son temps à travailler sur des projets open source.

Voir le menu

Les caractéristiques

  • Menu horizontal
  • 2 états : Bureau; Tablette et mobile
  • Pur CSS
PietruskyTim
Site de référence

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

positionneen début de page

Pietrusky Tim 2

Voir le menu

Les caractéristiques

  • Menu poussant par la gauche
  • 2 états : Bureau, tablette; Mobile
  • Pur CSS
PietruskyTim
Site de référence

[Créé / modifié] [26-03-2019 / 26-03-2019]

positionneen début de page

Pure Css

Voir le menu

Les caractéristiques

  • Menu poussant gauche
  • 2 états : Bureau; Tablette et mobile
  • Javascript uniquement pour 'basculer une classe'
  • Pure CSS
PureCss menu
Site de référence

[Créé / modifié] [02-01-2018 / 02-01-2018]

positionneen début de page

Pure Css 2

Voir le menu

Les caractéristiques

  • Menu fixe horizontal à défilement
  • 2 états : Bureau et tablette; Mobile
  • Pure CSS
PureCss menu
Site de référence

[Créé / modifié] [02-01-2018 / 02-01-2018]

positionneen début de page

Pure Css 3

Voir le menu

Les caractéristiques

  • Menu fixe horizontal
  • 2 états : Bureau; Tablette et mobile
  • Pure CSS
PureCss menu
Site de référence

[Créé / modifié] [02-01-2018 / 02-01-2018]

positionneen début de page

Ramirez Edwin

Voir le menu

Les caractéristiques

  • Pur CSS
  • 2 états : Bureau, tablette; Mobile
  • Menu déroulant par la gauche
menu pour listes avec drop-down
Site de référence

[Créé / modifié] [23-11-2018 / 23-11-2018]

positionneen début de page

ResponsiveNav

Voir le menu

Les caractéristiques

  • 2 états : Bureau, tablette; Mobile
  • Menu poussant par le haut
menu pour listes avec drop-down
Site de référence

[Créé / modifié] [21-04-2019 / 21-04-2019]

positionneen début de page

Santos Eva

Voir le menu

Les caractéristiques

  • Très peu de Javascript
  • 2 états : Bureau, tablette; Mobile
  • Menu fixe poussant par le haut
menu pour listes avec drop-down
Site de référence

[Créé / modifié] [02-12-2018 / 02-12-2018]

positionneen début de page

Shak Daniel

Voir le menu

Les caractéristiques

  • Bouton de navigation fixe, toujours visible
  • Un seul état : Mobile
  • CSS pur
PureCss menu
Site de référence

[Créé / modifié] [04-12-2018 / 04-12-2018]

positionneen début de page

Sullivan Paul

Voir le menu

Les caractéristiques

  • Plain écran
  • Bouton de navigation fixe, toujours visible
  • Un seul état : Mobile
  • CSS pur
PureCss menu
Site de référence

[Créé / modifié] [02-01-2019 / 02-01-2019]

positionneen début de page

The Pete Design

Concepteur visuel indépendant (Bangkok, Thaïlande) spécialisé dans l'interface utilisateur minimale et la conception UX fonctionnelle

Voir le menu

Les caractéristiques

  • Menu pleine page
  • 1 état multi supports
  • Javascript, jQuery
menu responsive
Site de référence

[Créé / modifié] [26-12-2018 / 26-12-2018]

positionneen début de page

Turton Tabitha

Geek, spécialiste des technologies.

Voir le menu

Les caractéristiques

  • Menu, dit hamburger, toujours présent, poussant par le haut
  • 2 états : Bureau, tablette; Mobile
  • Pur CSS
menu responsive
Site de référence

[Créé / modifié] [26-03-2019 / 26-03-2019]

positionneen début de page

Tympanus - Drop-down lists

Voir le menu

Les caractéristiques

  • Empilements avec décalage
  • 1 état multi supports
  • Javascript, jQuery
  • Modernizr
menu pour listes avec drop-down
Site de référence

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

positionneen début de page

Tympanus - Retina Ready Menu

Voir le menu

Les caractéristiques

  • 3 états : Bureau; Tablette; Mobile
  • Javascript
  • Modernizr
menu Retina
Site de référence

[Créé / modifié] [06-12-2014 / 06-12-2014]

positionneen début de page

Van Oijen Paul

Voir le menu

Les caractéristiques

  • Bouton de navigation fixe, toujours visible
  • Un seul état : Mobile
  • Très très peu de Javascript
  • Double transition agréable
menu Retina
Site de référence

[Créé / modifié] [13-03-2019 / 13-03-2019]

positionneen début de page

Vinial Antoine

Voir le menu

Les caractéristiques

  • 2états : Bureau, tablette; Mobile
  • Très très peu de Javascript
  • Menu agréable
menu fixe
Site de référence

[Créé / modifié] [20-05-2019 / 20-05-2019]

positionneen début de page

Xukanu

Voir le menu

Les caractéristiques

  • 3 états : Bureau; Tablette; Mobile
  • Très très peu de Javascript
  • Dommage ne fonctionne pas bien sur mobile
menu fixe
Site de référence

[Créé / modifié] [05-03-2019 / 05-03-2019]

positionneen début de page