Menu avec JS et/ou jQuery et/ou Bootstrap et/ou ...

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 généralement), avec Javascript, jQuery, Bootstrap ou autres... Ces menus sont tous 'responsive', sauf indication contraire. C'est à dire qu'ils s'adaptent à tous les formats d'écran.

Je vous propose 90 menus au



Sur d'autres pages

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

 

Mega menu horizontal

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]

Caba Wilberta

- Nécessite absolument: stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57 c1abc0e64599724 ae30d7ea4c6877 eb615f89387.js
- Solution complète du desktop au mobile

Caractéristiques

  • CSS, JS
  • Le menu glisse par la droite et recouvre partiellement
  • Chaque ligne de menu est précédée d'un icône
  • Rollover sur tous les liens
  • Palm Beach, Floride, USA

Image cliquable pour voir le menu

mega menu responsive avec CSS et JS seulement

Références

Site web

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

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]

Eloe Tom

- Solution complète du desktop au mobile

Caractéristiques

  • CSS, JS, jQuery
  • Opacifie entièrement d'un coup, puis les lignes de menu arrivent en glissant par la droite
  • Menu horizontal devenant vertical
  • Ce menu utilise des images que je n'ai pas retenues
  • 2 niveaux de sous-menu
  • Impossible de fermer un menu sans en ouvrir un autre
  • Danville, Califormie, USA

Image cliquable pour voir le menu

menu responsive horizontal avec 2 niveaux de sous-menus

Références

Site web

[Créé / modifié] [07-06-2022 / 07-06-2022]

Envato Tuts+

- Solution complète du desktop au mobile

Caractéristiques

  • CSS, UiKit (CSS, JS et Icons)
  • Avec Tutoriel
  • Menu horizontal devenant vertical
  • En mode desktop le détail du menu s'affiche en info bulle
  • Au clic sur l'icône hamburger c'est la page qui s'efface vers la gauche pour laisser voir le menu
  • Société Australienne

Image cliquable pour voir le menu

menu responsive horizontal avec uikit

Références

Site web

TUTO

[Créé / modifié] [15-08-2022 / 15-08-2022]

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]

Köhler Simon

- Solution complète du desktop au mobile

Caractéristiques

  • Menu poussant par le haut
  • Menu horizontal devenant vertical
  • CSS, Bootstrap 5.1.1, JS
  • Javascript pour le menu hamburger
  • Menu très complet voire compliqué
  • Chiriqui, Panama

Image cliquable pour voir le menu

Menu poussant par le haut en Bootstrap 5

Références

Site web

Site de l'auteur

[Créé / modifié] [30-03-2022 / 30-03-2022]

Lunn Benjamin

- Solution complète du desktop au mobile
- Plus qu'un menu c'est une en-tête complète

Caractéristiques

  • Menu poussant par le haut
  • Menu horizontal devenant vertical
  • CSS, Animate.css, Bootstrap 4.1.3, jQuery, Megamenu.js, etc...
  • Plus de dépendances c'est difficile
  • Las Vegas, Névada, USA

Image cliquable pour voir le menu

menu poussant par le haut

Références

Site web

[Créé / modifié] [30-03-2022 / 30-03-2022]

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]

Magar Prabin

- Solution complète du desktop au mobile

Caractéristiques

  • CSS, JS, jQuery
  • Menu recouvrant par le haut
  • Menu horizontal devenant vertical en mode mobile
  • 1 niveau de sous-menu
  • Katmandou, Népal

Image cliquable pour voir le menu

mega menu responsive

Références

Site web

[Créé / modifié] [07-06-2022 / 07-06-2022]

Pettersson Hannah

- Nécessite absolument: stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57 c1abc0e64599724 ae30d7ea4c6877 eb615f89387.js
- Solution complète du desktop au mobile

Caractéristiques

  • CSS, JS
  • Pousse brutalement par le haut
  • Menu horizontal devenant vertical en mode mobile
  • Rollover sur tous les éléments
  • Proposition sobre

Image cliquable pour voir le menu

menu responsive

Références

Site web

[Créé / modifié] [15-08-2022 / 15-08-2022]

Wikode Medias

- Solution complète du desktop au mobile

Caractéristiques

  • Menu recouvrant brutalement
  • Menu horizontal devenant vertical en mode mobile
  • 3 niveaux de menu
  • CSS, JS, Ionicons (CSS+JS)
  • France

Image cliquable pour voir le menu

menu responsive deroulant sur 3 niveaux

Références

Site web

[Créé / modifié] [14-03-2022 / 14-03-2022]

 

Mega menu vertical

Azouaoui Mohamed

- Solution complète du desktop au mobile

Caractéristiques

  • Menu poussant par la gauche
  • Un niveau de sous-menu
  • Menu construit avec SCSS et Vanilla Javascript
  • CSS, CSS-pro-layout.css, JS, Popper.js
  • Superbe menu
  • Algérie

Image cliquable pour voir le menu

menu poussant par la gauche avec un niveau de sous-menu

Références

Site web

Site de l'auteur

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

Choong Tiffany

- Pour mobile

Caractéristiques

  • CSS, JS, rien d'autre
  • Recouvre partiellement par la droite
  • 5 niveaux de prévus
  • Toronto, Ontario, Canada

Image cliquable pour voir le menu

menu recouvrant par la droite

Références

Site web

[Créé / modifié] [30-03-2022 / 30-03-2022]

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

Iilhamriz

- Solution complète du desktop au mobile

Caractéristiques

  • Side bar menu recouvrant par la gauche en mode desktop
  • Menu hamburger recouvrant par la gauche en mode mobile
  • CSS, Boxicons.css, JS
  • Rollover sur les lignes de menu
  • Sous menu bien mis en évidence
  • Solution très agréable à mon goût !

Image cliquable pour voir le menu

Side bar menu recouvrant par la gauche

Références

Site web

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

 

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]

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]

Ettrics

- Solution mobile, pouvant servir du desktop

Caractéristiques

  • Menu poussant par le haut
  • Les zones de menu diminuent en taille
  • CSS, JS, jQuery
  • Ottawa, Canada

Image cliquable pour voir le menu

Ce menu hamburger utilise CSS, JS et jQuery

Références

Site web

Site de l'auteur

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

G. Gaurav

- Solution complète du desktop au mobile
- Avec tutoriel

Caractéristiques

  • Menu horizontal devenant vertical en mode mobile
  • Menu recouvrant par la gauche
  • Simple et efficace
  • Pune, Inde

Image cliquable pour voir le menu

Tuto pour menu hamburger utilisant CSS et JS

Références

Site web

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

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]

Julio -

- Peut servir du desktop au mobile

Caractéristiques

  • Dans un premier temps le Logo glisse de la gauche et le menu 'Home' de la droite en même temps
  • Puis les autres têtes de menu arrivent par la droite, l'un après l'autre
  • CSS, JS, rien d'autre
  • Menu non recouvrant avec rollover rouge
  • USA

Image cliquable pour voir le menu

menu responsive du desktop au mobile

Références

Site web

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

Krsmanovic Bojan

- Solution mobile

Caractéristiques

  • Menu glissant par le haut et recouvrant entièrement la page
  • Rollover sur chaque colonne de menu
  • CSS, JS, jQuery
  • Serbie

Image cliquable pour voir le menu

menu deroulant par le haut recouvrant entierement

Références

Site web

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

Mulligan Ryan - 3

- Solution mobile

Caractéristiques

  • Menu simple glissant par la droite
  • À mon avis c'eût été parfait avec un bouton 'menu' fixe
  • CSS, JS, jQuery

Image cliquable pour voir le menu

menu deroulant par le haut

Références

Site web

Site de l'auteur

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

Penkov Vergil

- Solution complète du desktop au mobile

Caractéristiques

  • CSS, Normalize.css, JS, jQuery, OkayNav.js
  • Menu horizontal
  • Les occurences de menu sont toutes affichées en mode desktop
  • Plus on se rapproche de l'affichage mobile moins il y a d'occurences visibles. Celles qui ne le sont pas sont accessibles via les 'trois petits points'
  • Solution très agréable
  • Sofia, Bulgarie

Image cliquable pour voir le menu

menu responsive utilisant l'effacement progressif

Références

Site web

[Créé / modifié] [14-03-2022 / 14-03-2022]

Reece Jon

- 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
  • Greenville, SC USA

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]

Stephens Drew - DSDesigns

- Solution pour mobile

Caractéristiques

  • CSS, JS, jQuery, Bootstrap 3.3.7
  • Le menu tombe du haut et se stabilise à 45 degrés
  • L'affichage des occurences de menu et le rollover sont superbes (voir le site de référence)
  • La référence

Image cliquable pour voir le menu

menu responsive 3D avec flip

Références

Site web

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

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]

Torosian Mike - Sexy Flexy Mega Menu

- Peut servir du desktop au mobile

Caractéristiques

  • Menu hamburger maxi s'incrustant en partie haute
  • Les lignes de menu s'affichent avec un léger mouvement ascendant
  • CSS, Javascript, jQuery
  • Menu très agréable à regarder et parfaitement responsive
  • Fresno, Californie, USA

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 / 12-11-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]

Van Der Veen Arjan

- Solution complète du desktop au mobile

Caractéristiques

  • Menu recouvrant par le haut en mode mobile
  • Sticky menu avec mode transparent en ordonnée zéro
  • CSS, JS, rien d'autre
  • Simple, très propre et efficace
  • Leeuwarden, Pays-Bas

Image cliquable pour voir le menu

menu glissant par le haut

Références

Site web

Site de l'auteur

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

Vieira Carlos

- Solution complète du desktop au mobile

Caractéristiques

  • Menu recouvrant par le haut en mode mobile
  • Sticky menu avec mode transparent en ordonnée zéro
  • CSS, JS, jQuery, Bootstrap 4.0
  • Simple et efficace

Image cliquable pour voir le menu

menu glissant par le haut

Références

Site web

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

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]

Wheatup Hao

- Nécessite absolument: stopExecutionOnTimeout - 1b93190375 e9ccc259df3a57 c1abc0e64599724 ae30d7ea4c6877 eb615f89387.js
- Solution mobile possible sur desktop

Les caractéristiques du menu

  • Menu interactif en forme de roue
  • C'est la position de la souris et son clic qui permet d'afficher le menu
  • CSS, JS
  • Yokohama, Japon

Image cliquable pour voir le menu

menu en forme de roue

Références

Site web

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

 

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]

Annen Nick

- Solution mobile

Caractéristiques

  • Menu poussant par la droite
  • CSS, Materialize.css, JS, jQuery
  • À chaque fois que l'on descend d'un niveau une barre verticale grise est ajoutée à la gauche du menu
  • Solide proposition
  • Tustin, Californie, USA

Image cliquable pour voir le menu

menu poussant partiellement par la droite

Références

Site web

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

Ardito Marc

- Solution complète du desktop au mobile

Caractéristiques

  • Menu recouvrant partiellement par la gauche
  • Icônes de menu
  • Transition un peu brusque
  • CSS, Javascript, jQuery

Image cliquable pour voir le menu

menu glissant partiellement par la gauche

Références

Site web

[Créé / modifié] [20-11-2021 / 20-11-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]

Buireu Ferran

- Solution complète du desktop au mobile

Caractéristiques

  • Menu fixe en mode desktop
  • Menu hamburger glissant par la droite en mode mobile
  • CSS, JS, jQuery
  • Rollover en mode desktop, pas en mode mobile
  • Jolie proposition
  • Barcelone, Espagne

Image cliquable pour voir le menu

menu glissant par la droite en mode mobile

Références

Site web

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

Code Bucks

- Peut servir du desktop au mobile

Caractéristiques

  • Menu fixe se développant par la gauche
  • Au clic sur l'icône hamburger, le libellé du menu gauche par la droite
  • Au clic sur l'image du bas, le le profile glisse par la gauche
  • Lorsque le libellé du menu s'affiche, la taille de l'icône diminue
  • CSS, JavaScript, React.js
  • Très complet

Image cliquable pour voir le menu

menu glissant par la gauche

Références

Site web

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

Code Bucks (2)

- Solution mobile

Caractéristiques

  • Menu fixe se développant par la gauche
  • Au clic sur l'icône hamburger, un halo circulaire s'échappe de l'icône
  • En même temps les lignes de menu apparaissent comme sortant du halo
  • Même cinématique en sens inverse pour le retour
  • CSS, JavaScript, React.js
  • Très complet

Image cliquable pour voir le menu

menu recouvrant entierement par le centre de l'icone hamburger

Références

Site web

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

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
  • En mode desktop les points blancs 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]

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

Fugaro Marco

- Solution mobile

Caractéristiques

  • Menu poussant par la gauche de manière oblique
  • CSS, Normalize.css, JS, jQuery
  • Pas de rollover
  • Le retour se fait de la même façon en cliquant n'importe où
  • Italie

Image cliquable pour voir le menu

le menu pousse par la gauche en diagonale

Références

Site web

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

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]

Hicham Dadda

- Solution plus mobile que desktop

Caractéristiques

  • Side bar menu poussant par la gauche
  • CSS, Normalize.css, Tailwind.css, JS (très peu)
  • Rollover sur les lignes de menu mais pas sur l'icône hamburger
  • Les icônes des lignes de menu s'affichent en permanence
  • Maroc

Image cliquable pour voir le menu

Side bar menu aux icones de menu, fixes

Références

Site web

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

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]

Lin Liang-Shih

- Solution complète du desktop au mobile

Caractéristiques

  • Menu glissant par le haut en mode desktop et par la gauche en mode mobile
  • Rollover dans tous les cas
  • CSS, Normalize.css, JS
  • Belle proposition
  • Taipei City, Taiwan

Image cliquable pour voir le menu

menu glissant par la gauche ou par la droite

Références

Site web

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

Mc Fadzean Rob

- Solution mobile

Caractéristiques

  • Menu en deux temps, d'abord le fond puis les lignes de menu
  • Le fond prend sa couleur gentiment, les lignes de menu s'affichent avec un délicat mouvement de bas en haut
  • CSS, Normalize.css, Animate.css, JS, jQuery
  • Très convaincant

Image cliquable pour voir le menu

menu tout en douceur s'ouvrant a partir du centre

Références

Site web

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

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]

Normington Tim - Diagonal menu concept

- Solution mobile

Caractéristiques

  • CSS, Normalize.css, JS, jQuery, jQuery-UI, TweenMax.js,... et c'est tout !
  • Rollover sur les icônes de menu sauf le hamburger
  • La croix se ferme et le menu se prépare à s'ouvrir puis avec force se déploie
  • Les icônes de menu s'affichent avec un léger retard
  • Super !
  • Texas, USA

Image cliquable pour voir le menu

menu responsive diagonal

Références

Site web

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

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]

Shanks Kyle

- Solution plus mobile que desktop

Caractéristiques

  • Side bar menu poussant par la gauche
  • CSS, JS, jQuery
  • Étude de style qui prend beaucoup de place, side bar rentrée
  • Les lignes de menu s'affichent par glissement de gauche à droite avec délai de retard
  • Le logo s'adapte à la taille de la barre de menu
  • Brooklyn, NY, USA

Image cliquable pour voir le menu

Side bar menu poussant par la gauche

Références

Site web

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

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]

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

Vincent Matthew

Caractéristiques

  • Menu glissant par la gauche
  • Transition d'affichage des lignes de menu, agréable
  • CSS, Javascript, React.js
  • Oakland, Californie, USA

Image cliquable pour voir le menu

menu gauche sortant

Références

Site web

[Créé / modifié] [06-11-2021 / 06-11-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]

Zoric Mirko

- Peut servir du desktop au mobile

Caractéristiques

  • Le menu sort par la gauche, en bandeaux de couleur, pour recouvrir totalement la page
  • En mode mobile les bandeaux de couleur s'ouvre du haut en bas et de la gauche vers la droite
  • CSS, JS, jQhrry, Velocity.js
  • Rollover très beau
  • Croatie

Image cliquable pour voir le menu

menu hamburger qui se developpe par bandeaux colores

Références

Site web

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