Parfois, le menu de navigation peut être l’une des parties les plus délicates du processus de conception. Cette zone unique peut donner le ton à la convivialité de l’ensemble du site.
Aujourd'hui, nous allons examiner 30 exemples inspirants d'une bonne conception de menu. Bien que beaucoup soient du pur CSS, d'autres ajoutent des images et / ou du JavaScript pour améliorer l'esthétique et les fonctionnalités.
Approfondir
Il est toujours plus utile de se familiariser avec le processus de développement que de simplement voir une image. Dans cette section, nous allons brièvement aborder l'esthétique de chaque menu et la manière dont le développeur a réalisé l'effet. De cette façon, vous pourrez vous inspirer pour utiliser de nouvelles méthodes afin de créer vos propres menus.
Marée de la soie
C'est l'un des menus les plus minimes de la liste. En gros, il s’agit d’un texte simple avec un survol prolongé de la boîte bleue, mais il est très facile à mettre en œuvre et produit un bel effet.
Glenn Sorrentino
Cet exemple utilise des bordures CSS en haut et en bas du menu dont l'épaisseur augmente lorsque vous les survolez.
Strutta
Si vous avez un arrière-plan texturé, envisagez d’utiliser la transparence dans votre menu pour améliorer l’esthétique. Cela pourrait facilement être fait avec RGBa en CSS3.
Elbow Park
Un autre exemple de transparence dans la zone de navigation. Celui-ci utilise un effet similaire à celui du premier exemple avec la boîte de sélection allant jusqu'au sommet de la page. Cela augmente la visibilité et permet une conception plus homogène.
Thoughtbot
Lorsque vous survolez ces boutons, l’arrière-plan devient rouge plus clair. Cette combinaison avec le look brillant (réalisé avec un PNG transparent) crée l'illusion de l'éclairage de la zone.
Toffee Nut Design
Ce bel exemple utilise des sprites CSS pour la navigation. L'ensemble du menu est constitué d'un fichier PNG affichant chacun des onglets dans trois états: désactivé, activé et activé.
Safarista
Nous voyons ici chaque section de la navigation comme un hybride d’image et de texte. L'icône, le dégradé et l'arrière-plan plus petit créent l'image de chaque section, tandis que le texte plus large porte le style HTML avec un effet de survol du soulignement.
David Jonsson
Un autre effet de survol simple qui saigne au maximum. Celui-ci avait des icônes cachées qui ne s'affichent que lorsque vous passez la souris. Un bel effet!
Asvalia
J'aime beaucoup les couleurs et le texte tordu de ce menu. Les renversements lumineux sont parfaits.
Studios de bonsaï
Celui-ci est un menu vertical extrêmement simple avec transparence et un vol stationnaire assombrissant. Il fait le travail, est superbe et peut être construit en quelques minutes.
Eglise des grandes attentes
Un autre menu de navigation verticale. Celui-ci implémente des icônes simples mais attrayantes et un fond GIF avec un dégradé pour le survol.
Ryan Couser
Celui-ci utilise quelques sprites simples pour accomplir le vol stationnaire. Chaque icône est une image avec les états activé et désactivé.
Kk Media
Nous voyons ici un menu vertical avec des icônes plus détaillées. Chaque lien est un élément de liste HTML avec une simple image d’arrière-plan appliquée en CSS.
Bite Club
J'ai vraiment aimé cette barre de navigation. La luminosité attire vraiment votre attention et l'inversion des couleurs permet un retournement parfait. Cela utilise également une image-objet pour chaque élément de menu, chacun avec trois états.
Capital City Equipment Company
Je pensais que la sélection de navigation en forme de maison était intelligente sur celui-ci. Le texte de chaque lien fait partie de l'image. Si vous reproduisez une telle opération, il serait simple d'utiliser du texte actif au-dessus de l'image d'arrière-plan.
Fraise Loisirs
Ce menu déroulant utilise un petit fichier PNG transparent répétitif pour extraire l’effet d’opacité réduite. Encore une fois, nous pouvons nous attendre à ce que ce soit beaucoup plus facile dans un avenir proche avec la RGBa lorsque de plus en plus de navigateurs s’engagent.
Studio artificiel
Oui, vous l'avez deviné, plus d'images-objets (sentant une tendance ici?). Les gros boutons et les excellents dégradés créent une belle zone de navigation.
Cognigen
C’était de loin l’un des concepts les plus originaux de ma recherche. Pour tirer de l'effet 3D unique, le concepteur a utilisé quatre états énormes pour chaque bouton, qui changent en fonction du choix du bouton, de son survol ou de la sélection adjacente.
Plus Bonté Menu CSS
Maintenant que nous avons discuté d’excellents exemples, en voici d’autres plus intéressantes. Utilisez la fonction d'inspection de votre navigateur pour vérifier le code et les images derrière celles que vous aimez!
Manndible Cafe
Code Greene
Opéra
Mac Lapin
Clark constructeurs
M. B et ses amis
Subvertir
La vie swish
Boîte mystère
LiveResto
FeelSocial
Gowalla
Festival NZ
Téléchargez les menus prédéfinis!
Besoin d'un bon point de départ pour vos propres menus CSS? Découvrez ces excellentes ressources gratuites.
- 13 Styles: Les menus sont basés sur des listes, très légers, faciles à mettre en œuvre et compatibles avec tous les navigateurs.
- CSS Menu Maker
- CSS Play: Menus
- Menus CSS
- Menus CSS gratuits Cross Browser
Maintenant, montrez-nous le vôtre
Avez-vous un menu CSS dont vous êtes particulièrement fier? Utilisez les commentaires ci-dessous et laissez un lien afin que nous puissions voir. Dites-nous également lequel des exemples ci-dessus vous avez le plus aimé.