30 techniques de menu CSS exceptionnelles

02 Jan
2016
30 techniques de menu CSS exceptionnelles

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

Le menu du menu
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.

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.

Évaluer ce post
Avatar de Yoann Dennequin

Yoann Dennequin
author

Leave a reply

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

"Chez Metadosi, nous pensons qu'avoir des valeurs fortes est très important. C'est pourquoi nous avons pensé qu'il était important de vous en parler"

Pin It on Pinterest