50 exemples de menus déroulants dans les conceptions Web
Il est essentiel de disposer d’une navigation propre et bien structurée sur le site Web pour concevoir une interface utilisateur efficace. Les menus déroulants sont parfaits pour les sites comportant plusieurs niveaux de hiérarchie de contenu. Le modèle de conception typique d'un menu déroulant est le suivant : lorsqu'un utilisateur survole l'élément de navigation parent, un sous-menu d'éléments de navigation apparaît.
Cette collection contient de nombreux types de menus déroulants utilisés sur tous les sites Web pour vous inspirer.
Voici quelques collections associées à la navigation dans les sites qui pourraient également vous intéresser :
- 30 techniques de navigation CSS exceptionnelles
- 50 menus de navigation élégants pour le Design
- 20 excellentes techniques et exemples de navigation JavaScript
1. Pure Grips
Pure Grips propose des images dans son menu déroulant pour indiquer clairement à l'utilisateur quels produits sont quels produits.
2. Menu déroulant de Porsche
Lorsque vous survolez chaque voiture, l'image de droite change. Il semble également magnifique avec le fond semi-transparent.
Porsche
3. B & Q
B & Q propose un menu de navigation déroulant propre et accrocheur qui répertorie les colonnes de produits recherchées par les clients.
B et Q, bricolage
4. Santé brique rouge
Ce menu déroulant s’intègre parfaitement dans la conception du site. Le surlignage rose est une touche de détail.
Brique rouge santé
5. Carreras Con Futuro
La conception de ce menu déroulant incarne le thème dessiné à la main du site Web.
Carreras Con Futuro
6. Galaico Folia
Ce sous-menu déroulant a un effet d’animation merveilleux avec les plus petites pièces de bois repliées depuis l’élément du menu principal.
Galaico Folia
7. Callaway Golf
Il s'agit d'une conception de navigation déroulante très soignée qui a un effet de survol orange.
Call Away Golf Shop
8. Converse
Converse a un menu de navigation déroulant de style grunge qui a une texture semblable à celle d'un tissu avec des bords crépus.
Converser
9. Puma
Ce menu déroulant sombre se démarque vraiment du reste des couleurs plus claires du site.
Boutique Puma
10. Refuge de lunettes de soleil
Ce menu de navigation est fonctionnel dans le sens où il sert également de visuel illustré des différents styles de lunettes de soleil.
SunGlass Hut
11. Nettuts +
Netttuts + a un menu déroulant propre qui fonctionne bien avec les couleurs de leur en-tête.
Net Tuts +
12. Tennessee Trails & Byways
Ce menu déroulant est unique car dans le sous-menu, il existe également une navigation par onglets.
Tennessee Trails And Byays
13. Gateway
Le menu déroulant de cette conception présente de jolies courbes et de superbes images qui servent à afficher des images des produits du fabricant de l’ordinateur.
Gateway
14. Berne
Ce site Web au style grunge approximatif comporte un menu déroulant énervé qui complète l’aspect esthétique de l’esthétique générale du site Web.
Berne
15. Valloire
Ski alpin
16. Guitar Hero
Ce menu simple est pratique et ne détourne pas les zones principales de la présentation de la page Web.
Guitar Hero
17. Mac Appstorm
Voici un menu de navigation propre qui s’intègre parfaitement dans le paysage général de la conception du site.
Mac Appstorm
18. Noizi Kidz
Cette navigation est lumineuse et a une forme non conventionnelle.
Noizi Kidz
19. Audi
Ce menu déroulant contient des vignettes du modèle de voiture du constructeur automobile; lorsque vous survolez une voiture, elle affiche des détails à ce sujet, ainsi que des liens pertinents vers d'autres pages.
Audi
20. biscuits célèbres
Ce menu déroulant présente les délicieux biscuits que le magasin met à la disposition de ses clients affamés.
Cookies célèbres
21. Pépinière Duché de Cornouailles
Cette conception de site Web de style papier présente un menu déroulant agréable et propre.
Duché de Cornouailles
22. EA
Electronic Arts propose un menu déroulant de style ludique.
EA
23. Bonfire Snowboarding
Bonfire Snowboarding possède un impressionnant sous-menu déroulant à 3 colonnes sur l'élément de navigation principal «Produits», plaçant leurs produits dans trois catégories.
Bonfire Snowboard
24. Facebook
Un menu déroulant simple est disponible sur Facebook dans le lien du menu principal «Compte» du site avec des liens pertinents pour la modification de votre compte Facebook.
25. Nick Ad
Vous devez maintenir le pointeur de la souris enfoncé pour que le sous-menu apparaisse. Ensuite, vous passez au lien que vous voulez dans chaque liste déroulante et relâchez le bouton de votre souris pour visiter cette page; c’est une conception d’interaction non conventionnelle intéressante.
Nick Ad
26. TN vacances
Ce menu de navigation bleu foncé se démarque vraiment.
TN vacances
27. MTV UK
Cette conception de site comporte un menu déroulant propre et standard.
MTV UK
28. chaussures DC
Le texte rouge et blanc sur le fond noir semi-transparent fait vraiment son charme.
des chaussures DC
29. Marketplace Envato
C'est un très beau menu déroulant.
Envato Marketplaces
30. Théâtre du Tennessee
Cette navigation est particulière car elle est à la fois propre et créative. Le marron se démarque vraiment du reste des couleurs douces du site.
Tennessee Theatre
31. Boden
Chaque élément de menu a une police différente et le menu déroulant est très propre.
Boden
32. Maison Blanche
Le fond blanc, le texte bleu et les bordures supérieure et inférieure rouges utilisent les couleurs du drapeau des États-Unis.
Maison Blanche
33. Navigant Consulting
Les couleurs utilisées sur ce site fonctionnent ensemble comme les joueurs d’une équipe de football.
Navigant Consulting
34. Club des officiers
Un autre site de vêtements avec un menu déroulant; avoir un sous-menu déroulant facilite beaucoup la recherche de produits. La liste déroulante Officiers Club a une disposition en plusieurs colonnes.
Le club des officiers
35. Fall For Tennessee
Fall for Tennessee propose un menu déroulant horizontal qui se glisse vers la droite. Les éléments de menu qui ont un sous-menu déroulant ont une petite flèche à côté d'eux pour indiquer qu'ils peuvent être développés.
Tomber pour le Tennessee
36. Sony
Sony propose un menu déroulant très large et simple sur son site principal au Royaume-Uni.
Sony
37. Projet Vino
Ce menu déroulant utilise des couleurs qui conviennent au reste du site. La grande taille de la police et la conception générale sont étonnantes.
Projet Vino
38. Temple des médias
Media Temple propose de loin l'un des meilleurs menus déroulants sur le plan esthétique. La petite vignette de chaque type d'hébergement à côté du nom de celui-ci est superbe, avec d'excellentes transitions d'animation basées sur JavaScript.
Temple des médias
39. Mozilla
Il s'agit d'un menu déroulant simple mais élégant sur Mozilla.
Mozilla
40. August
L’effet de semi-transparence dans ce menu de navigation fonctionne avec une image d’arrière-plan éclatante.
august
41. Vêtements Henley
La couleur de navigation principale descend dans le sous-menu déroulant.
Vêtements Henleys
42. Digg
Les sous-menus déroulants classiques Digg fonctionnent avec la conception générale de leur site Web.
Digg
43. Action Enveloppe
Ce menu déroulant est spécial car il a un bel effet d’ombre qui fait vraiment sortir le menu de la page du reste du site.
Enveloppe d'action
44. Very
Very, une nouvelle boutique en ligne, dispose d’un menu déroulant propre et structuré.
Très
45. Incase
Le menu de navigation Incase est légèrement plus clair que l’arrière-plan de navigation et s’harmonise parfaitement à l’aspect net et net du site.
Au cas où
46. Américain Eagle
J'aime beaucoup le menu déroulant d'American Eagle car il occupe toute la largeur du site et se fond également dans le style papier.
Aigle américain
47. Infusion de Mayflower
Les couleurs utilisées dans cette liste déroulante (et le site en général) sont magnifiques.
Mai Fleur Brewing
48. Sélect clothing
Le menu de navigation Select Clothing (Vêtements) présente un fond sombre qui se détache sur les images glissantes ci-dessous.
Sélectionnez la mode
49. Bird Malaysia
Ce menu déroulant est spécial car les couleurs se détachent du reste du site Web et j’aime bien l’image de fond subtile au bas de chaque menu.
Oiseau Malaisie
Contenu connexe
50. Le Web Squeeze
Web Squeeze a implémenté jQuery dans son menu déroulant pour lui donner quelques effets super intéressants.
Le Web Squeeze