30 techniques de menu CSS exceptionnelles
Nous avons constaté des moyens novateurs permettant aux concepteurs et aux développeurs d’utiliser le CSS pour remédier à ses lacunes. La création d’un site internet est tout aussi importante que le SEO pour les activités de votre client. Ces conseils devraient donc vous aider à concevoir votre site Web. Vous trouverez ici quelques-uns des meilleurs moyens d’utiliser le CSS pour le menu sur votre site Web. Vous trouverez une variété de techniques qui illustrent vraiment les fonctionnalités du CSS.
Dans cet article, vous trouverez un ensemble d'excellentes techniques de navigation utilisant le CSS pour fournir aux utilisateurs une interface impressionnante pour la création de sites internet. Ces techniques conviennent parfaitement à un large éventail de secteur d'activité. Que votre client soit un agent immobilier ou un concessionnaire automobile, ces techniques devraient aider à améliorer la conception de leurs sites Web.
1. Le menu du menu
C'est un autre excellent menu CSS Stu Nicholls qui est unique - survoler un élément de menu révèle un sous-menu. Si vous voulez commencer avec ce menu, visualisez simplement le code source. Démo en page.
2. Menu de survol Pure CSS
Pure CSS hover menu
Dans cette technique CSS, vous apprendrez à créer un menu de survol CSS orienté verticalement qui révèle un sous-menu lorsqu'un élément de menu est survolé.
3. Menu CSS matte
Matte CSS
Matte est un menu CSS simple avec des coins arrondis utilisant deux petites images uniquement à partir de 13 styles. Il est maintenu par David Appleyard qui a beaucoup de menus simples et avancés basés sur CSS.
4. Menu CSS Floue
CSS Menu View floue
Cette technique CSS vous montre une méthode de création d'un menu qui rend flous les éléments de menu frères lorsque vous survolez un élément.
5. Navigation CSS avec des icônes lumineux
Navigation CSS avec des Icons lumineux
Cette belle technique de menu CSS peut être créée en suivant ce didacticiel détaillé, étape par étape.
6. Porte coulissante CSS utilisant une seule image
CSS Sliding Door utilisant seulement 1 image
Ce menu CSS est basé sur la technique des portes coulissantes mais n’utilise qu’une image.
7. Matrice de navigation rechargée
Démo Matrice de Navigation rechargée
Cette technique de menu de navigation élégante utilise un sprite CSS.
8. Menu horizontal CSS
CSS Horizontal Menu
Mise à jour : cela n'existe plus. Ian Main propose un grand nombre de menus CSS gratuits, élégants et faciles à utiliser.
9. Menu CSS Woody
Woody CSS Menu.
Woody est un menu CSS prédéfini, prêt à être utilisé et qui a été testé dans IE6, IE 7, Firefox, Opera, Safari et Chrome.
10. Menu CSS avancé
Menu CSS avancé
Le Menu CSS avancé a été créé par Nick La et utilise un menu de liste avancé (extraordinaire) utilisant la propriété de position CSS.
11. Simple onglet jaune
Simple onglet jaune
Ce menu provient du générateur de menus CSS, qui propose davantage de menus gratuits de haute qualité.
12. Top Navigation
Top Navigation comme sur Vimeo
Ce menu de navigation basé sur CSS est basé sur le menu principal de Vimeo.
13. Menu CSS Apple Like Colorful
Menu CSS de substitution d’Apple
Apprenez une technique pour imiter le menu CSS de substitution d’image d’Apple en suivant ce didacticiel. Démo en page.
14. CSS Hoverbox
CSS Hoverbox
Inspiré de la technique de la Galerie d’images Hoverbox développée par Nathan Smith, CSS Hoverbox s’appuie sur la propriété CSS d’arrière-plan pour superposer des images survolées au-dessus des éléments de menu voisins.
15. Big CSS Box
Big CSS Box
C’est un menu CSS expérimental qui vous permet de créer un menu de mise à l’échelle qui s’ajuste en fonction de la largeur du navigateur. Démo en page.
16. Menu déroulant simple basé sur CSS
Menu déroulant simple basé sur le CSS
Il s'agit d'un menu déroulant très basique basé sur CSS, qui est excellent pour essayer de maîtriser la technique utilisée pour créer un menu déroulant ne nécessitant pas de script côté client.
17. Navigation horizontale à deux niveaux en CSS
Navigation horizontale à deux niveaux dans la démo CSSView
Veerle Pieters fournit un menu et un tutoriel CSS créés à l'aide de la propriété CSS text-indent.
18. Menus de la liste CSS Uberlink
Uberlink CSS List Menus
Cette barre de navigation CSS ressemble à un menu de permutation d’images.
19. Effet accordéon CSS uniquement
Menu accordéon compatible CSS
Dans cette technique, vous serez témoin d’une méthode permettant de créer un menu accordéon basé sur CSS.
20. Navigation par onglets avec CSS
Navigation par onglets avec CSS
Voici une autre excellente méthode pour créer une interface d'onglet de module basée uniquement sur CSS. Utilisez les onglets de la page pour en savoir plus sur les instructions relatives à la mise en œuvre de cette technique.
21. Mini-onglets CSS (l'onglet UN, onglet)
CSS Mini Tabs (l'onglet UN, onglet)
Ce menu CSS de la célèbre agence de design Web SimpleBits montre un moyen de créer des mini-onglets. Consultez le code source sur la page de démonstration pour en apprendre plus sur son fonctionnement (le code est en ligne et correctement formaté pour une meilleure lisibilité).
22. Menus déroulants, style horizontal
Menus déroulants, démonstration horizontale de StyleView
Cette technique de menu A List Apart CSS concerne un sous-menu déroulant qui apparaît à droite du menu principal, en exploitant la propriété position : CSS absolue pour déplacer le sous-menu au niveau approprié.
23. Liste dans une barre de navigation
Liste dans une démo de la barre de navigation
Roger Johansson, du 456 Berea Street, nous explique les principes de base pour transformer une liste non ordonnée en barre de navigation : c’est un excellent point de départ pour que les débutants s’instruisent sur la construction d’une structure HTML sémantique, puis sur leur style avec CSS.
24. Les onglets CSS avec sous-menus
Onglets CSS avec sous-menus
Cette technique de menu CSS vous permettra de créer des onglets CSS comportant des sous-menus pour une hiérarchie à deux niveaux. Démo en page.
25. Menu de navigation du bloc CSS
Menu de navigation des blocs CSS
Cette technique de menu CSS vous permet de créer un menu de navigation comportant un élément avec des descriptions.
26. Navigation Sprite XHTML & CSS
Démonstration de navigation Sprite XHTML & CSS
Cette technique de menu sprites CSS élégante comporte trois états : inactif, survolé et cliqué.
27. Menu à onglets CSS XHTML
Menu à onglets XHTML CSS
Apprenez à créer des onglets de module sans utiliser de script côté client.
28. Menu CSS simple, horizontal et cool
Démonstration de navigation Sprite XHTML & CSS
Apprenez à créer une technique simple pour créer un menu basé sur le CSS.
29. Menu CSS avec descriptions
Menu CSS avec Descriptions
Cette technique présente une méthode pour créer un menu qui se développe lorsque vous la survolez.
30. Bouton de survol CSS
CSS Button au survol
Créez un menu de navigation de style bouton en CSS en consultant cet excellent tutoriel.
