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 48 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. Design DrasticFixe (JS, jQuery)
  20. Design ShackHorizontal (CSS pur)
  21. Eduard L#Vertical (CSS pur)
  22. Iclanzan - SlinkyVertical (JS, jQuery)
  23. Inspirational PixelsHorizontal (JS, jQuery)
  24. jQuery ScriptHorizontal (JS, jQuery)
  25. jQuery Script 2Horizontal (JS, jQuery)
  26. jQuery Script 3Horizontal (JS, jQuery)
  27. jQuery Script 4Horizontal (JS, jQuery) Nouveauté
  28. Khurshi Ahsan #Horizontal (CSS pur)
  29. Kirsch Christophe Bouton fixe (JS, jQuery)
  30. Loncarek Mario#Recouvrant (JS, jQuery)
  31. Multi-level Push MenuVertical (JS, jQuery)
  32. Murray MarkHorizontal (JS, jQuery)
  33. Osvaldas ValutisHorizontal (JS, jQuery)
  34. Pietrusky TimHorizontal (CSS pur)
  35. Pietrusky Tim 2Horizontal (CSS pur)
  36. Pure CssHorizontal (CSS pur)
  37. Pure Css 2Horizontal (CSS pur)
  38. Pure Css 3Horizontal (CSS pur)
  39. Ramirez Edwin#Horizontal (Css pur)
  40. Santos Eva#Horizontal (Css, JS)
  41. Shak DanielFixe (CSS pur)
  42. Sullivan PaulFixe (CSS pur)
  43. The Pete DesignPleine page (JS, jQuery)
  44. Turton TabithaHorizontal (CSS pur)
  45. TympanusHorizontal (JS, jQuery)
  46. Tympanus 2Horizontal (JS)
  47. Van Oijen PaulFixe (JS)
  48. 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

  • Design DrasticHorizontal (JS, jQuery)
  • 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

    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

    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

    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