Menu en CSS3 et Html5

Présentation

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

Je vous propose 98 menus au

 

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]

Mondal Suvodip

- Conservé pour l'exemple

Caractéristiques

  • Menu fixe, toujours visible
  • La colonne s'écarte au survol et le titre se redresse
  • 1 état multisupports
  • Caractères trop petits sur mobile (Note-8). Dommage j'adore cette présentation

Image cliquable pour voir le menu

menu css pur

Références

Site web

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

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]

Singh Himalaya

- Ajouté pour l'exemple

Caractéristiques

  • Menu fixe sur une kligne, toujours visible
  • Double réaction au passage de la souris
  • Double coloration : La couleur des deux petites boules correspond à la valeur basse et haute du dégradé que l'on retrouve sur le souligné
  • Début de solution, dommage que ce ne soit pas utilisable 'tel quel'
  • J'aime malgré tout l'idée

Image cliquable pour voir le menu

PureCss menu avec belles transitions colorees

Références

Site web

[Créé / modifié] [18-11-2020 / 18-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

AgenceLab40 - Tuto

- Solution mobile
- Taille de l'image au survol anormalement grosse

Caractéristiques

  • Avec tuto, très intéressant
  • 2 états : Bureau et tablette; Mobile
  • Bouton de navigation fixe à gauche en mode bureau et tablette et en bas en mode mobile, toujours visible
  • CSS pur

Image cliquable pour voir le menu

menu css pur avec tutoriel

Références

Pas de Site web

[Créé / modifié] [26-06-2020 / 26-06-2020]

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]

Amli 2 - Indonésie

- Idem ci-dessus, solution mobile

Caractéristiques

  • Menu fixe gauche
  • Affichage en deux temps : D'abord le libellé du menu puis sa composition

Image cliquable pour voir le menu

menu css pur fixe

Références

Site web

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

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]

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]

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]

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]

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]

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]

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 horizontal en JS, jQuery et autres

Adnan Topal - SlimMenu

- Solution complète du desktop au mobile

Caractéristiques

  • SlimMenu est un plugin jQuery léger
  • Menu poussant par le haut
  • Javascript, jQuery, Bootstrap

Image cliquable pour voir le menu

menu horizontal poussant par le haut

Références

Site web

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

Azmind

- Solution complète du desktop au mobile

Caractéristiques

  • Menu hamburger en position haute
  • Menu horizontal, le restant en mode mobile
  • Menu glissant par le haut
  • Javascript, jQuery, Bootstrap
  • Joli mouvement de l'icône hamburger

Image cliquable pour voir le menu

template de menu horizontal en css, jQuery et Bootstrap

Références

Site web

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

Bishnoi Mahendra

Caractéristiques

  • Menu horizontal devenant vertical en mode mobile
  • CSS, JS (un peu)
  • Recouvre entièrement par la gauche
  • Simple mais très efficace

Image cliquable pour voir le menu

menu recouvrant par la gauche

Références

Site web

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

Bootstrap Menu

- Menu 'sticky', c'est à dire fixe (en haut)

Caractéristiques

Image cliquable pour voir le menu

menu fixe pour desktop et mobile poussant par le haut

Références

Site web

[Créé / modifié] [06-04-2021 / 06-04-2021]

Code Arlina

- Solution complète du desktop au mobile

Caractéristiques

  • Mega menu avec search bar
  • Menu glissant par la gauche
  • Le menu recouvre entièrement la page
  • Logo prévu
  • JS, jQuery
  • J'aime bien

Image cliquable pour voir le menu

mega menu responsive avec search bar

Références

Site web

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

Cody House

- Solution mobile

Caractéristiques

  • Menu poussant par la gauche
  • Menu pleine page
  • CSS, JavaScript

Image cliquable pour voir le menu

Exemple de menu poussant par la gauche en CSS et Javascript

Références

Site web

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

Cody House 1 - Effet 3D

- Solution mobile

Caractéristiques

  • Menu hamburger en position haute
  • Menu horizontal, le restant en mode mobile
  • Menu poussant par le haut avec un effet 3D de rotation
  • CSS, Javascript

Image cliquable pour voir le menu

Bmenu hamburger poussant par le haut avec un effet 3D

Références

Site web

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

Dash Zed

- Solution mobile

Caractéristiques

  • Menu fixe se déployant vers la droite
  • Mémorisation du menu sélectionné
  • CSS; JS; jQuery
  • Material Design
  • Belle proposition

Image cliquable pour voir le menu

menu se deployant a l'horizontal

Références

Site web

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

DeBroux Andrew

- Solution complète du desktop au mobile

Caractéristiques

  • Recouvre en surimpression en mode mobile
  • Adaptation d'un menu de 'tympanus.net'
  • Menu à 3 niveaux
  • CSS, JavaScript, jQuery, Modernizr.js

Image cliquable pour voir le menu

menu en surimpression

Références

Site web

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

Deshpande Piyush

- Solution complète du desktop au mobile
- Jolie vague qui se promène et se positionne

Caractéristiques

  • Menu poussant par le haut
  • CSS; JS; jQuery; Bootstrap 4.3

Image cliquable pour voir le menu

menu responsive sur base Bootstrap 4

Références

Site web

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

El Pablo

- Peut servir du desktop au mobile
- Problème de cadrage des deux premières images

Caractéristiques

  • Menu fixe associé à un slider d'images
  • Il y a un lien entre une image et un menu
  • CSS, JS, jQuery, TwinMax
  • Le disporama peut se mettre en mode automatique

Image cliquable pour voir le menu

menu en CSS associé à un slider d'images

Références

Site web

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

Grozdic Ivan

- Solution complète du desktop au mobile

Caractéristiques

  • Recouvre partiellement par le haut
  • Menu horizontal devenant vertical
  • Ce menu utilise les sous-menus
  • CSS, Javascript, jQuery
  • Bootstrap 4.1
  • Mode noir ou blanc

Image cliquable pour voir le menu

menu responsive horizontal devenant vertical en mode mobile

Références

Site web

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

Inspirational Pixels - Tuto

- Solution complète du desktop au mobile

Caractéristiques

  • Avec tutoriel
  • S'affiche en surimpression
  • Menu horizontal devenant vertical
  • CSS, Javascript, jQuery

Image cliquable pour voir le menu

menu responsive horizontal devenant vertical en mode mobile

Références

Site web

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

Iridescent - Tuto

- Solution complète du desktop au mobile

Caractéristiques

  • 2 groupes d"éléments : Un pour le mode desktop et un pour mobile, d'où le nombre différent de lignes de menu
  • Menu horizontal devenant vertical
  • CSS, Javascript
  • Je rajouterais "position: fixed; top: 0;" dans la classe ".topnav" pour coller le menu en haut et pour ne rien voir d'autre en mode mobile

Image cliquable pour voir le menu

menu responsive bien explique dans le tutoriel

Références

Site web

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

jQuery Script

- Solution complète du desktop au mobile
- Trop petit sur mobile

Caractéristiques

  • Menu fixe déroulant
  • Menu horizontal devenant vertical en mode mobile
  • Javascript, jQuery

Image cliquable pour voir le menu

jQueryScript.net menu deroulant

Références

Site web

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

jQuery Script 2

- Solution complète du desktop au mobile

Caractéristiques

  • Menu fixe déroulant
  • Menu horizontal devenant vertical en mode mobile
  • CSS, Normalize.css, Javascript, jQuery

Image cliquable pour voir le menu

menu fixe deroulant en mode mobile

Références

Site web

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

jQuery Script 3

- Peut servir du desktop au mobile
- Trop petit sur mobile

Caractéristiques

  • Menu en trois dimensions
  • Menu poussant par la gauche
  • Apparition du menu au survol de la flèche
  • Fonction créée par Hakim El Hattab (http://hakim.se, @hakimel)

Image cliquable pour voir le menu

menu responsive 3D poussant par la gauche

Références

Site web

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

jQuery Script 4

- Solution mobile
- Trop petit sur mobile

Caractéristiques

  • Bouton toujours visible
  • C'est la page qui s'écarte, en diagonale, pour laisser apparaître le menu
  • CSS, Javascript, jQuery

Image cliquable pour voir le menu

menu original faisant se retirer la page pour voir le menu

Références

Site web

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

Osvaldas Valutis

- Solution complète du desktop au mobile

Caractéristiques

  • Menu déroulant pas le haut
  • Menu horizontal devenant vertical
  • CSS, Normalize.css, JavaScript, jQuery

Image cliquable pour voir le menu

menu deroulant par le haut

Références

Site web

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

Pagès Andy

- Solution mobile
- L'affichage peut sortir de l'écran s'il est mal placé

Caractéristiques

  • Menu flottant positionnable
  • Le menu se déploie sur la gauche
  • CSS, JavaScript, jQuery
  • Jolie proposition

Image cliquable pour voir le menu

menu flottant horizontal

Références

Site web

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

Reece Jon - Designer, développeur, Greenville, SC USA

- Solution complète du desktop au mobile

Caractéristiques

  • Méga menu poussant par le haut
  • Menu horizontal devenant vertical en mode mobile
  • Ce menu est responsive, càd qu'il peut être utilisé sur desktop et mobile
  • CSS, Normalize.css, JS, jQuery

Image cliquable pour voir le menu

menu responsive poussant par le haut

Références

Site web

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

Santos Eva

- Solution complète du desktop au mobile
- Les images sont au format SVG

Caractéristiques

  • Menu fixe poussant par le haut
  • Menu horizontal devenant vertical en mode mobile
  • Très peu de Javascript

Image cliquable pour voir le menu

menu fixe pour desktop et mobile poussant par le haut

Références

Site web

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

Schlotel Tristan

- Menu 'sticky', c'est à dire fixe (en haut)

Caractéristiques

  • Menu horizontal devenant vertical en mode mobile
  • CSS, jQuery, Tether.js, Bootstrap 4
  • Barre de navigation fixe (en haut à droite)
  • Mise à jour du menu actif lors du défilement
  • Tristan Schlotel, Software Engineer, Dusseldorf

Image cliquable pour voir le menu

menu fixe pour desktop et mobile poussant par le haut

Références

Site web

[Créé / modifié] [06-04-2021 / 06-04-2021]

Sejer Hoffmann Rune

- Solution mobile

Caractéristiques

  • Menu recouvrant entièrement par le haut
  • Très peu de Javascript
  • Belles transitions

Image cliquable pour voir le menu

menu recouvrant avec belles transitions

Références

Site web

[Créé / modifié] [15-05-2020 / 15-05-2020]

Smith Nicholas Matthew

- Solution mobile

Caractéristiques

  • Ce menu avec effet 3D voit la page pivoter sur elle-même
  • Autrement dit : Menu 3D, avec flip par rapport à un axe vertical
  • CSS, Normalize.css, JS, jQuery
  • Très original
  • Allez voir le site de l'auteur, il vaut le voyage !
  • Minneapolis, Minnesota, USA

Image cliquable pour voir le menu

menu responsive 3D avec flip

Références

Site web

Site de l'auteur

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

Summers Jeffrey - Plugin

- Solution complète du desktop au mobile

Caractéristiques

  • Menu recouvrant par la gauche en mode mobile
  • CSS, Javascript
  • Un autre exemple du même auteur

Image cliquable pour voir le menu

menu Retina

Références

Site web

Site de l'auteur

Site de telechargement de l'autre exemple

[Créé / modifié] [03-03-2021 / 07-09-2021]

Tympanus - Retina Ready Menu

- Solution complète du desktop au mobile

Caractéristiques

  • Menu déroulant par le haut en mode mobile
  • 3 états : Bureau; Tablette; Mobile
  • CSS, Javascript, Modernizr.js

Image cliquable pour voir le menu

menu Retina

Références

Site web

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

Vinial Antoine

- Solution complète du desktop au mobile

Caractéristiques

  • Menu poussant par le haut en mode mobile
  • Menu caché, apparaîssant au clic sur la flèche
  • Très très peu de Javascript
  • Menu agréable

Image cliquable pour voir le menu

cache poussant par la haut

Références

Site web

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

W3 Hubs

- Solution complète du desktop au mobile

Voir le menu combiné avec une modale windows

La modale window pour les fonctions Login/register est du même auteur

Les caractéristiques du menu

  • Menu glissant par le haut en mode mobile
  • Menu horizontal devenant vertical en mode mobile
  • CSS, Bootstrap 5, popper.js
  • Parfaitement responsive

Image cliquable pour voir le menu

menu fixe

Références

Site web

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

 

Menu vertical en JS, jQuery et autres

Alchemist Devilish

- Solution mobile

Caractéristiques

  • Menu poussant par la gauche de manière circulaire
  • CSS, Normalize.css, Javascript, jQuery

Image cliquable pour voir le menu

menu poussant par la gauche de maniere circulaire

Références

Site web

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

Amaral Flavio - Aveiro, Portugal

- Solution mobile

Caractéristiques

  • Menu "dropdown"
  • CSS, Javascript
  • Très jolie présentation : Rollover et curseur qui se modifie
  • Mémorisation de la ligne de menu
  • Super !

Image cliquable pour voir le menu

menu fixe deroulant pour mobile

Références

Site web

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

Bizal Marcus

- Solution mobile
- Cadrage perfectible

Caractéristiques

  • Menu recouvrant par le haut droit de manière circulaire
  • Très joli mouvement
  • CSS, Normalize.css, Javascript, jQuery

Image cliquable pour voir le menu

menu poussant par la gauche de maniere circulaire

Références

Site web

Site de l'auteur

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

Blode Matthew

- Solution mobile

Caractéristiques

  • Menu glissant par la gauche
  • Bouton de navigation fixe, toujours visible
  • CSS, JavaScript
  • Web designer & developer à Melbourne, Australie

Image cliquable pour voir le menu

BlodeMatthew menu CSS3

Références

Site web

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

Brumm Kyle

- Peut servir du desktop au mobile

Caractéristiques

  • Menu poussant par la gauche
  • Donne l'impression que c'est la page qui se retire en se rétrécissant
  • Icône hamburger fixe
  • Un seul état multisupports
  • CSS, JavaScript, Modernizr.js
  • Developer à Chicago

Image cliquable pour voir le menu

menu poussant ou page se retirant en reduisant de taille

Références

Site web

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

Chris Yee - Pushy

- Peut servir du desktop au mobile

Caractéristiques

  • Menu poussant par la gauche
  • Menu recouvrant entièrement la page
  • 1 seul état multisupports
  • CSS, Normalize.css, JavaScript, jQuery

Image cliquable pour voir le menu

menu recouvrant par la gauche

Références

Site web

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

Cody House 2

- Solution mobile

Caractéristiques

  • Menu déroulant par le haut
  • CSS, JavaScript, jQuery, Modernizr.js
  • Icons: Nucleoapp.com

Image cliquable pour voir le menu

Exemple de menu déroulant avec CodyHouse

Références

Site web

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

Cody House 3

- Peut servir du desktop au mobile

Caractéristiques

  • Menu poussant par la droite
  • 2 états : Bureau; Tablette et mobile
  • CSS, JavaScript, jQuery, Modernizr.js
  • Les points blanc se transforment en icône. Bien vu !

Image cliquable pour voir le menu

menu  poussant par la droite avec les points qui se transforment

Références

Site web

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

Cody House 4

- Peut servir du desktop au mobile

Caractéristiques

  • Méga menu vertical s'affichant au clic
  • 1 état multisupports
  • CSS, JavaScript, jQuery, Modernizr.js

Image cliquable pour voir le menu

mega menu CSS Javascript à partir d'un bouton cliquable

Références

Site web

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

Cody House 5

- Solution complète du desktop au mobile

Caractéristiques

  • Méga menu poussant par la droite en mode mobile
  • En mode tablette et mobile le sous-menu est glissant par la droite également
  • Idéal pour les gros site qui fonctionnent sur tous les supports
  • CSS, JavaScript, jQuery, Modernizr.js

Image cliquable pour voir le menu

mega menu responsive pour gros sites avec jQuery et Modernizr

Références

Site web

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

Creme

- Solution mobile

Caractéristiques

  • Menu hamburger glissant. Il recouvre tout l'écran en deux parties égales : Le menu proprement dit, à droite, et les réactions au survol, à gauche
  • CSS, Normalize.css, JavaScript, jQuery, TweenMax.js
  • Pas responsive ?

Image cliquable pour voir le menu

menu hamburger, recouvrant, pour mobile

Références

Site web

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

Crofte Geoffrey

- Solution mobile

Caractéristiques

  • Menu recouvrant par le bas droit, en deux temps
  • Lignes de menu déroulant du bas vers le haut
  • CSS, Normalize.css, très peu de JavaScript
  • Transition originale
  • Designer Web UX français vivant actuellement au Luxembourg, amoureux des belles images

Image cliquable pour voir le menu

transitions d'affichages originales avec peu de Javascript

Références

Site web

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

Css Script 2

- Solution complète du desktop au mobile

Caractéristiques

  • Menu poussant par la gauche
  • Menu recouvrant entièrement la page
  • CSS, JavaScript

Image cliquable pour voir le menu

menu de cssscript.com en CSS et Javascript seulement

Références

Site web

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

Design Drastic

- Solution mobile
- Déborde à droite, dommage !

Caractéristiques

  • Menu hamburger se déroulant vers le bas
  • Occupation circulaire du menu
  • CSS, Javascript et jQuery

Image cliquable pour voir le menu

menu hamburger avec effet circulaire, deroulant vers la bas

Références

Site web

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

Grozdic Ivan

- Solution mobile

Caractéristiques

  • Déploie par le coin haut gauche
  • Les lignes de menu s'affichent, elles, par la droite
  • CSS, Javascript, jQuery
  • Bootstrap 4.1
  • Mode noir ou blanc

Image cliquable pour voir le menu

menu responsive vertical utimisant le framework Bootstrap

Références

Site web

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

Harry Joe

- Solution mobile

Caractéristiques

  • La croix se transforme en lignes de menu
  • Déroulement vertical avec empilement bas
  • Réaction de la ligne de menu au survol
  • CSS, Normalize.css, Javascript, jQuery

Image cliquable pour voir le menu

menu haut deroulant avec empilement en bas

Références

Site web

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

Iclanzan - Slinky

- Solution mobile
- Conservé pour l'exemple

Caractéristiques

  • Menu fixe qui s'empile en haut et en bas
  • CSS, Javascript, jQuery

Image cliquable pour voir le menu

menu fixe deroulant puis s'empilant

Références

Site web

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

Kirbaba Vladislav

- Solution mobile

Caractéristiques

  • Menu hamburger ou Toggle menu
  • Fenêtre glissant par le haut
  • Beau mouvement de l'icône
  • CSS, JS, jQuery

Image cliquable pour voir le menu

menu hamburger avec glissement vertical

Références

Site web

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

Kirsch Christophe

- Solution mobile

Caractéristiques

  • Bouton de navigation fixe, toujours visible
  • Déploiement circulaire
  • CSS, Javascript, jQuery
  • Sur mobile il faut appuyer longtemps sur l'icône

Image cliquable pour voir le menu

KirschChristophe

Références

Site web

[Créé / modifié] [28-02-2019 / 09-11-2020]

Kitten Capn

- Solution mobile

Caractéristiques

  • Menu recouvrant entièrement
  • CSS, Normalize.css, JS, jQuery

Image cliquable pour voir le menu

menu css recouvrant vertical pour mobile

Références

Site web

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

Mp_Graphic

- Peut servir du desktop au mobile

Caractéristiques

  • Menu poussant par la droite
  • On a en même temps l'impression que le page se retire en se retrecissant
  • 1 état multisupports
  • CSS, jQuery
  • Tellement bien fait que ça parait simple !

Image cliquable pour voir le menu

menu poussant par la droite

Références

Site web

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

Mulligan Ryan

- Solution mobile

Caractéristiques

  • Recouvrant à partir du centre
  • Légère transparence
  • CSS, Normalize.css, JS, jQuery

Image cliquable pour voir le menu

menu css recouvrant a partir du centre pour mobile

Références

Site web

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

Negomi - React Burger Menu

- Peut servir du desktop au mobile

Caractéristiques

  • Composant React
  • Série d'effets et de styles utilisant des transitions CSS et des animations de chemin SVG
  • Exemples de menus glissants par la gauche
  • 1 seul état multisupports
  • CSS, Normalize.css, JavaScript
  • Transitions de la barre latérale de Codrops

Image cliquable pour voir le menu

Negomi, menus glissants par la gauche

Références

Site web

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

Nozdriukhin Alex - Assembling menu concept

- Solution mobile

Caractéristiques

  • S'assemble doublement par la droite : Le fond et les lignes de menu
  • CSS, JavaScript, Runtime.js
  • Rollover sur les lignes de menu, superbe
  • Je trouve cette proposition très belle

Image cliquable pour voir le menu

menu responsive conept 3D

Références

Site web

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

Pasaribu Bhakti

- Solution mobile

Caractéristiques

  • Menu déroulant par le haut en mode mobile
  • Mémorisation du menu choisi
  • CSS, JavaScript, jQuery, TwennMax, TextPlugin
  • Menu très original dans sa conception, ce qui ne l'empêche pas d'être fonctionnel
  • Pas responsive

Image cliquable pour voir le menu

menu vertical deroulant avec memorisation du choix

Références

Site web

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

Responsive Nav

- Solution complète du desktop au mobile

Caractéristiques

  • Menu gauche poussant par le haut en mode mobile
  • CSS, JS

Image cliquable pour voir le menu

menu responsive poussant par le haut

Références

Site web

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

Simic Antonija

- Solution mobile

Caractéristiques

  • Menu hamburger poussant par la droite
  • Transition de l'icône; Transition d'affichage; Transition au survol
  • CSS, JS, jQuery
  • Menu très élégant et très complet

Image cliquable pour voir le menu

menu hamburger poussant par la droite avec multiples transistions

Références

Site web

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

Torosian Mike - Sexy Flexy Mega Menu

- Peut servir du desktop au mobile

Caractéristiques

  • Menu hamburger maxi recouvrant entièrement par le bas
  • 1 état multisupports
  • CSS, Javascript, jQuery
  • Menu très agréable à regarder et parfaitement responsive

Image cliquable pour voir le menu

Développeur front-end, passionné de design, fanboy de WordPress, AFOL, etc...

mega menu hamburger responsive

Références

Site web

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

Tympanus 2 - Drop-down lists

- Solution mobile

Caractéristiques

  • Empilements avec décalage
  • CSS, Javascript, jQuery, Modernizr.js
  • 6 exemples différents

Image cliquable pour voir le menu

menu pour listes avec drop-down

Références

Site web

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

Van Oijen Paul

- Solution mobile

Caractéristiques

  • Menu poussant par le haut
  • Le texte, ensuite glisse par la droite
  • Double transition très agréable + transparence
  • CSS, Animate.css, jQuery, Wow.js
  • Superbe !

Image cliquable pour voir le menu

menu poussant par le haut, texte glissant par la droite

Références

Site web

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

Videk Karlo

- UI Design pour mobile seulement

Caractéristiques

  • Menu Découpé en 3 zones blanches obliques qui se resserrent
  • Glissement du bas vers le haut des lignes de menu
  • Beau travail sur l'icône
  • CSS, Javascript, jQuery, TweenMax.js, TimelineMax.js
  • Très original
  • 'Front-end' developpeur habite à Zagreb, Croatie

Image cliquable pour voir le menu

menu haut deroulant avec empilement en bas

Références

Site web

Site de l'auteur

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

Videk Karlo 2

- Jolie étude, pour mobile seulement
- Écrit trop petit pour une utilisation aisée mais il suffit d'augmenter la taille de la police

Caractéristiques

  • Menu fixe
  • Glissement vers la droite des lignes de menu au survol (en deux temps)
  • Glissement vers la droite du numéro de ligne jusqu'à disparition
  • CSS, Javascript, jQuery, TweenMax.js, Pixi.js
  • Original
  • Videk Karlo est très créatif, j'aime beaucoup

Image cliquable pour voir le menu

menu haut deroulant avec empilement en bas

Références

Site web

Site de l'auteur

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

Wilcox Jon

- Solution mobile

Caractéristiques

  • Menu haut déroulant
  • Empile en bas
  • Transition de déploiement originale
  • CSS, Javascript, jQuery

Image cliquable pour voir le menu

menu haut deroulant avec empilement en bas

Références

Site web

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

Wilsdon Graham

- Solution mobile

Caractéristiques

  • Menu recouvrant entièrement
  • Très très peu de Javascript
  • Menu en transparence, très agréable

Image cliquable pour voir le menu

menu fixe

Références

Site web

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

Yuhomyan

- Peut servir du desktop au mobile

Caractéristiques

  • Le menu sort par la gauche en recouvrant partiellement
  • CSS pur
  • Couleur pastel reposante

Image cliquable pour voir le menu

menu responsive de couleur pastel

Références

Site web

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