Menu en CSS pur

Présentation

Pour donner à votre site un air agréable, professionnel et facile d'utilisation voici des menus basés sur le CSS et uniquement le CSS. Ces menus sont tous 'responsive', sauf indication contraire. C'est à dire qu'ils s'adaptent à tous les formats d'écran.

Je vous propose 42 menus au

  • Menu horizontal
    1. Css ScriptFixe sur une seule ligne
    2. Design ShackFixe (+ TUTO)
    3. Dubroeucq VincentRecouvre par la droite (+ TUTO)
    4. Khurshi Ahsan Recouvre par la droite
    5. Mulligan Ryan 2MRecouvre totalement par la gauche
    6. Philippot ArmandPousse par le haut
    7. Pietrusky Tim 2Pousse par la gauche
    8. Pure Css 2Fixe sur une ligne
    9. Pure Css 3Pousse par le haut
    10. Ramirez EdwinRecouvre par la gauche
    11. Turton Tabitha#Recouvre par le haut
    12. Zeng AllyMRecouvre totalement

  • Menu vertical
    1. AmliM#Pousse par la droite
    2. Augusto FabricioMPousse par la gauche
    3. Bué MatthieuMPousse par la gauche
    4. Chandler JoannaMSe déploie au clic
    5. Code ConveyMPousse par la gauche (+ TUTO)
    6. Code HimMAccordéon (+TUTO)
    7. Css Script 3Recouvre par la gauche
    8. Css Script 4MRecouvre par la droite
    9. D AdamMRecouvre par la gauche
    10. Fernandes DilsonMRecouvre entièrement du centre du bouton
    11. Free SeanRecouvre par la gauche
    12. Gonzalves LmMPousse par le haut
    13. Ichinose TakaneMRecouvre par le haut droit
    14. iGadgetMRecouvre par la droite Nouveauté
    15. Insolera MarcelloMRecouvre par la gauche
    16. Jassal ArjanMFixe, 3D
    17. Jeem NaimMPousse par le haut
    18. Kreoger TracyMRecouvre par la droite&
    19. Kuhn Adam Deroulant par le haut
    20. Martínez Marín ElenaMRecouvre totalement par la gauche
    21. Morando SebastianoMRecouvre totalement
    22. Shak DanielMDéploiement par le centre
    23. Simmons ChrisLa page se met en perspective
    24. StumpelCydMRecouvre par la droite
    25. Sullivan PaulMRecouvre totalement par la gauche
    26. Terwan ErikMRecouvre par la gauche
    27. Tiwari GautamRecouvre partiellement

  • Menu circulaire, rectangulaire
    1. Kostadin @LogrithumnMCirculaire Nouveauté
    2. Kostadin @Logrithumn (2)MRectangulaire Nouveauté
    3. LaChance JasperMCirculaire Nouveauté

  • Services supprimés
    1. Adtile - supprimé le 10-11-2020 (site inaccessible)
    2. AgenceLab40 - supprimé le 30-10-2021 (fonctionnement)
    3. Amli 2 - supprimé le 30-10-2021 (déplacé dans tab bar)
    4. Bebber Lucas - supprimé le 14-03-2021 (Ne marche plus)
    5. Claudio Holanda- supprimé le 14-03-2021 (Ne marche plus)
    6. Cody House 2 - supprimé le 30-10-2021 (déplacé dans tab bar)
    7. Css Menu Maker - supprimé le 09-02-2021 (site inaccessible)
    8. Dash Zed - supprimé le 30-10-2021 (déplacé dans tab bar)
    9. David Bushell - supprimé le 10-11-2020 (page en erreur 404)
    10. DeBrouxAndrew - supprimé le 30-10-2021 (trop petit pour mobile)
    11. Design Shack - supprimé le 06-09-2021 (page en erreur 401)
    12. Durand Vincent - supprimé le 22-02-2021 (tremble)
    13. Eduard Leonardo - supprimé le 10-11-2020 (pas responsive)
    14. El Pablo - supprimé le 30-10-2021 (fonctionnement)
    15. Farrow Jack - supprimé le 22-02-2021 (date)
    16. Loncarek Mario - supprimé le 10-11-2020 (pas responsive)
    17. Mondal Suvodip - supprimé le 30-10-2021 (pas responsive)
    18. Murray Mark - supprimé le 22-02-2021 (pas responsive)
    19. Multi-level Push Menu - supprimé le 10-11-2020 (site inaccessible)
    20. Pagès Andy - supprimé le 30-10-2021 (déplacé dans tab bar)
    21. Pure Css - supprimé le 22-02-2021 (problème d'affichage)
    22. Pietrusky Tim - supprimé le 22-02-2021 (ne se replie pas)
    23. Piyush Deshpande - supprimé le 06-11-2021 (ne fonctionne plus)
    24. Singh Himalaya - supprimé le 30-10-2021 (pas responsive)
    25. The Pete Design - supprimé le 10-11-2020 (accès sur desktop)
    26. Xukanu - supprimé le 10-11-2020 (ne fonctionne plus en mode mobile)


Sur d'autres pages

[Menu JS] [Icône ham.] [Search box]

 

Menu horizontal en CSS pur

Css Script

- Solution complète du desktop au mobile

Caractéristiques

  • Menu fixe, sur une seule ligne
  • Menu avalant par la droite

Image cliquable pour voir le menu

menu de cssscript.com

Références

Site web

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

Dubroeucq Vincent - Tuto

- Solution complète du desktop au mobile

Caractéristiques

  • Menu horizontal devenant vertical
  • Glisse par la droite
  • Avec tutoriel

Image cliquable pour voir le menu

menu en pure CSS glissant

Références

Site web

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

Khurshi Ahsan

- Solution complète du desktop au mobile

Caractéristiques

  • Menu glissant par la droite
  • Menu horizontal devenant vertical
  • Menu avec de nombreux sous-menus

Image cliquable pour voir le menu

KhurshiAhsan

Références

Site web

[Créé / modifié] [11-12-2018 / 14-03-2021]

Mulligan Ryan 2

- Solution mobile

Caractéristiques

  • Recouvrant complètement par la gauche
  • Avec effet de lignes fuyantes
  • Belles translations

Image cliquable pour voir le menu

menu css recouvrant par la gauche avec effet de lignes

Références

Site web

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

Philippot Armand - Tuto

- Solution complète du desktop au mobile.
- Il est sur plusieurs niveaux et c'est bien utile lorsque l'on a un site fourni.

Caractéristiques

  • Menu déroulant
  • Menu horizontal devenant vertical sur mobile
  • Turoriel sur le site de l'auteur (lien ci-dessous)

Image cliquable pour voir le menu

menu deroulant responsive tout en CSS

Références

Site web

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

Pietrusky Tim 2

- Solution complète du desktop au mobile

Caractéristiques

  • Menu toujours visible
  • Menu horizontal devenant vertical
  • Menu poussant par la gauche
  • Double effet au survol

Image cliquable pour voir le menu

menu poussant par la gauche avec double rollover

Références

Site web

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

Pure Css 2

- Solution complète du desktop au mobile

Caractéristiques

  • Menu horizontal à défilement
  • Réaction au clic

Image cliquable pour voir le menu

PureCss menu

Références

Site web

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

Pure Css 3

- Solution complète du desktop au mobile

Caractéristiques

  • Menu poussant par le haut
  • Menu horizontal devenant vertical
  • Réaction au clic

Image cliquable pour voir le menu

menu css reponsive poussant par le haut

Références

Site web

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

Ramirez Edwin

- Solution complète du desktop au mobile

Caractéristiques

  • Menu glissant par la gauche
  • Double réaction au survol
  • Très joli menu à double niveau

Image cliquable pour voir le menu

menu pour listes avec drop-down tout en CSS

Références

Site web

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

Turton Tabitha

- Solution complète du desktop au mobile

Caractéristiques

  • Menu hamburger glissant par le haut
  • Menu horizontal devenant vertical en mode mobile
  • Geek, spécialiste des technologies

Image cliquable pour voir le menu

menu responsive

Références

Site web

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

Zeng Ally

- Solution complète du desktop au mobile

Caractéristiques

  • Menu hamburger recouvrant totalement
  • Menu horizontal devenant vertical en mode mobile
  • Icône hamburger
  • Impeccable

Image cliquable pour voir le menu

menu responsive en CSS pur

Références

Site web

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

 

Menu vertical en CSS pur

Amli

- Solution mobile
- Créateur de design, passionnant !

Caractéristiques

  • Menu glissant par la droite
  • Ne se referme pas quand on actionne la croix en mode mobile
  • Solution très simple mais très efficace
  • J'aime beaucoup l'ectrême delicatesse de ce menu

Image cliquable pour voir le menu

menu css pur glissant par la droite

Références

Site web

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

Augusto Fabricio - Goiania - GO, Brésil

- Solution mobile

Caractéristiques

  • Menu poussant par la gauche
  • Avec transition de décalage

Image cliquable pour voir le menu

menu en CSS pur, poussant par la gauche

Références

Site web

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

Bué Matthieu

- Solution mobile

Caractéristiques

  • Menu glissant par la gauche et recouvrant totalement l'écran
  • Icône hamburger
  • CSS, Normalize.css
  • jQuery dans le code ????
  • Matthieu Bué est concepteur Web, développeur front-end et enseignant html/css

Image cliquable pour voir le menu

menu responsive en 'CSS pure' pour mobile seulement

Références

Site web

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

Chandler Joanna - Cleveland, USA

- Solution mobile

Caractéristiques

  • Menu hamburger se déployant au clic
  • Les barres de l'icône servent de séparateur
  • Original et ingénieux !

Image cliquable pour voir le menu

menu hamburger avec jolie transition

Références

Site web

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

Code Convey - Tuto

- Solution mobile

Caractéristiques

  • Menu poussant par la gauche
  • Avec tutoriel

Image cliquable pour voir le menu

Code Convey menu css pur avec transition

Références

Site web

[Créé / modifié] [27-05-2020 / 09-11-2020]

Code Him - Tuto

- Solution mobile
- Ce site propose tout un tas de ressources

Caractéristiques

  • Menu fixe toujours visible
  • Menu accordéon
  • Avec tutoriel

Image cliquable pour voir le menu

menu accordéon vertical, responsive

Références

Site web

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

Css Script 3

- Peut servir du desktop au mobile

Caractéristiques

  • Menu glissant par la gauche
  • CSS, Normalize.css
  • Un peu de Javascript

Image cliquable pour voir le menu

menu de cssscript.com

Références

Site web

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

Css Script 4

- Solution mobile

Caractéristiques

  • Menu glissant par la droite
  • Très belles transisitions et "double salto arriè" de l'icône hamburger

Image cliquable pour voir le menu

menu hamburger vertical glissant pour mobile seulement

Site web

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

DAdam

- Solution mobile

Caractéristiques

  • Menu "STAR Wars" glissant par la gauche
  • Icône hamburger particuliaegrave;rement travaillé
  • C'est une présentation originale et spécifique
  • Quasi en CSS pur

Image cliquable pour voir le menu

menu vertical glissant par la gauche facon Star Wars

Références

Site web

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

Fernandes Dilson

- Solution mobile

Caractéristiques

  • Menu Hamburger
  • Recouvrant totalement à partir du centre du bouton
  • Effet circulaire de déploiement
  • Retour à la position d'origine avec transition douce

Image cliquable pour voir le menu

menu en CSS pur, recouvrant totalement

Références

Site web

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

Free Sean

- Solution complète du desktop au mobile

Caractéristiques

  • Menu hamburger
  • Recouvre par la gauche
  • Les lignes de menu s'affichent avec un très léger décalage dans le temps
  • La zone hors menu ets opacifiée
  • Jolie proposition
  • Greenville, Caroline du Sud, USA

Image cliquable pour voir le menu

menu hamburger recouvrant par la gauche avec fond restant opaque

Références

Site web

Site de l'auteur

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

Gonzalves Lm

- Solution mobile

Caractéristiques

  • Morphing Hamburger Menu
  • Menu poussant par le haut avec une belle transition sur les lignes de menu
  • Effet circulaire de déploiement

Image cliquable pour voir le menu

menu en CSS pur, poussant par le heut

Références

Site web

[Créé / modifié] [18-10-2020 / 18-10-2020]

Ichinose Takane

- Solution mobile

Caractéristiques

  • Menu recouvrant par le coin haut droit dans un mouvement circulaire
  • CSS, Normalize.css
  • Les lignes de menu s'affichent de la gauche vers la droite avec un délai de retard croissant
  • Joli effet de transparence
  • Kanagawa, Japon

Image cliquable pour voir le menu

menu recouvrant par la droite totalement

Références

Site web

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

iGadget

- Solution mobile

Caractéristiques

  • Menu recouvrant par la droite
  • Rollover sur la croix, rollover sur la flèche
  • Le menu glisse précédé d'une vague
  • Il se retire de la même manière
  • Menu ouvert l'ascenseur droit permet de faire défiler le contenu
  • Berlin, Allemagne

Image cliquable pour voir le menu

menu recouvrant par la droite partiellement avec transparence totale

Références

Site web

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

Insolera Marcello

- Solution mobile

Caractéristiques

  • Menu recouvrant par la gauche de manière oblique
  • CSS, Normalize.css
  • Les lignes de menu s'affichent en bloc
  • Hambourg, Allemagne

Image cliquable pour voir le menu

menu recouvrant par la droite totalement

Références

Site web

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

Jassal Arjan

Caractéristiques

  • Menu fixe, vertical, toujours visible
  • Effet de rotatio 3D
  • Un seul état multisupports

Image cliquable pour voir le menu

menu vertical sans Javascript (pur CSS)

Références

Site web

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

Jeem Naim

- Solution mobile
- Très subtile

Caractéristiques

  • Menu poussant vers le bas
  • Effet circulaire de déploiement
  • Jeem Naim, du Bangladesh, est un programmeur passionné amoureux de Linux, il aime relever des défis

Image cliquable pour voir le menu

menu avec poussee circulaire en pure CSS

Références

Site web

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

Kreoger Tracy

- Solution mobile

Caractéristiques

  • Menu recouvrant par la droite
  • CSS, Normalize.css
  • Joli mouvement de retrait de l'icône hamburger
  • Les lignes de menu s'affichent de la gauche vers la droite avec un délai de retard croissant

Image cliquable pour voir le menu

menu recouvrant par la droite avec menu hamburger

Références

Site web

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

Kuhn Adam

- Solution complète du desktop au mobile

Caractéristiques

  • Menu déroulant par le haut
  • Menu horizontal devenant vertical
  • Ne se referme pas quand on actionne la croix

Image cliquable pour voir le menu

menu deroulant par le haut

Références

Site web

[Créé / modifié] [25-04-2020 / 25-04-2020]

Martínez Marín Elena

- Solution mobile

Caractéristiques

  • Menu hamburger glissant par la gauche
  • Menu recouvrant entièrement
  • Décalage du glissement à chaque ligne de menu
  • Double réaction au passage de la souris
  • CSS, très peu de JS
  • Jolie présentation

Image cliquable pour voir le menu

menu horizontal glissant par la gauche

Références

Site web

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

Morando Sebastiano

- Solution mobile

Caractéristiques

  • Menu recouvrant totalement
  • CSS pur
  • Aucune dépendance
  • Les lignes de menu s'affichent l'une après l'autre par le bas
  • À cela s'ajoute un joli dégradé gris clair
  • Verone, Italie

Image cliquable pour voir le menu

menu recouvrant totalement

Références

Site web

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

Shak Daniel

- Solution mobile

Caractéristiques

  • Menu recouvrant par le centre
  • Bouton de navigation fixe, toujours visible

Image cliquable pour voir le menu

PureCss menu

Références

Site web

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

Simmons Chris

- Solution mobile, possible sur desktop

Caractéristiques

  • Menu hamburger
  • Le contenu de la page s'efface pour laisser apparaître le menu
  • Ce retrait se fait en perspective

Image cliquable pour voir le menu

menu hamburger apparaissant

Références

Site web

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

Stumpel Cyd

- Solution mobile

Caractéristiques

  • Menu recouvrant totalement par la droite dans un phénomène de bascule
  • CSS pur
  • Amsterdam, Pays-Bas

Image cliquable pour voir le menu

menu recouvrant par la droite avec un phenomene de bascule

Références

Site web

Site de l'auteur

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

Sullivan Paul

- Solution mobile

Caractéristiques

  • Menu hamburger glissant par la gauche
  • Menu recouvrant entièrement
  • Bouton de navigation fixe, toujours visible

Image cliquable pour voir le menu

menu hamburger glissant en plein ecran

Références

Site web

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

Terwan Erik

- Solution mobile

Caractéristiques

  • Menu recouvrant par la gauche
  • CSS pur
  • Aucune dépendance
  • Les lignes de menu s'affichent en bloc, d'abord doucement puis rapidement pour finir
  • Ce mouvement est original
  • Pays-Bas

Image cliquable pour voir le menu

menu recouvrant par la gauche avec une double vitesse

Références

Site web

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

Tiwari Gautam - Uttarakhand, Inde

- Solution globale plutôt orienté mobile

Caractéristiques

  • Menu responsive avec rupture à 520px
  • Menu recouvrant partiellement
  • Gautam Tiwari est un développeur front-end qui aime développer des composants au pixel près en utilisant uniquement HTML et CSS

Image cliquable pour voir le menu

menu en CSS pure

Références

Site web

Site de l'auteur

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

 

Menu circulaire en CSS pur

Kostadin alias @Logrithumn - Circulaire

- Solution mobile

Caractéristiques

  • Menu hamburger sans rollover
  • Au clic une couronne l'entoure
  • Rollover sur les composants de cette couronne
  • Elle tourne en cliquant sur la flèche faisant défiler le menu dans un sens puis dans l'autre

Image cliquable pour voir le menu

menu hamburger et circulaire

Références

Site web

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

Kostadin alias @Logrithumn (2) - Rectangulaire

- Solution mobile

Caractéristiques

  • Menu sans rollover sur le premier carré
  • Au clic, un premier carré sort de manière circulaire et vient se positionner sur la pointe du carré principal
  • Puis 2 fois 2 carrés sortent du dessous du grand carré
  • Une fois tous sortis, le premier carré semble se soulever
  • Rollover sur chacun des petits carrés qui fait se tasser celui-ci puis se soulever ensuite

Image cliquable pour voir le menu

menu rectangulaire en pur CSS

Références

Site web

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

LaChance Jasper - Circulaire

- Solution mobile

Caractéristiques

  • Rollover sur l'icône hamburger
  • Au clic, déploiement circulaire de six autres icônes
  • Rollover par complémentarité sur chacun des images du menu
  • Les icônes du menu se replient tous d'un coup
  • Canada

Image cliquable pour voir le menu

menu hamburger circulaire total

Références

Site web

Site de l'auteur

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