Aujourd'hui, nous allons avoir toutes sortes de plaisir. Nous allons d’abord créer un menu animé utilisant de tout nouveaux CSS3 tout en apprenant à mettre en œuvre des pseudo sélecteurs de manière pratique dans un projet réel. Ensuite, nous verrons comment construire la même chose sans pseudo-sélecteurs pour une meilleure prise en charge du navigateur. Pour finir, nous verrons comment supprimer tout ce CSS sophistiqué au profit d’un bon vieux jQuery.
Rejoignez-nous alors que nous examinons non pas une mais trois façons de traiter un menu de navigation coulissant CSS!
Pourquoi les pseudo-sélecteurs?
L'un des principaux objectifs de cet article est d'illustrer un exemple concret d'utilisation de pseudo-sélecteurs, qui n'est pas le didacticiel de table évident.
Les pseudo-sélecteurs ont beaucoup de battage médiatique sur les blogs de design, mais quand vient le temps de commenter, je vois toujours la même question: "Génial, mais quand vais-je vraiment les utiliser?" Parfois, nous commençons à utiliser des exemples ridicules et irréalistes uniquement pour montrer un nouveau jouet, tandis que les lecteurs le qualifient immédiatement de "quelque chose de génial". mais pas tout ce qui sera jamais pratique.
Notre menu de navigation ne contient que quelques pseudo-sélecteurs très rapidement, ce qui est exactement la façon dont vous utiliserez ces types à l'avenir.
Que construisons-nous?
Le but ici est de créer un simple menu de navigation CSS composé de blocs rectangulaires sur fond rouge. Lorsque l'utilisateur survole l'élément de menu, une animation glisse et le message ainsi que la couleur d'arrière-plan de l'élément de menu changent.
C'est presque comme un effet d'ouverture de porte de garage appliqué via des animations CSS. C'est un projet amusant et l'effet final est superbe.
Première étape: le HTML
Notre structure HTML est très succincte, juste une div contenant une liste non ordonnée avec trois éléments de liste. Les éléments de la liste peuvent sembler un peu étranges au premier abord, chacun n’ayant pas un mais deux liens, l’un après l’autre. Vérifiez-le:
Chaque élément de la liste représente un élément de navigation. Chaque élément de navigation a deux états distincts: défaut et survolé. Les deux liens représentent chaque état. Remarquez comment, en survol, j'ai changé les messages passifs en appel à l'action:? À propos de? devient? Rencontrez-nous?, cela aide subtilement à encourager le comportement de clic.
C'est vraiment tout le code HTML dont nous avons besoin pour cette ronde. Vous pouvez déjà commencer à réfléchir à la manière de cibler différemment chaque lien dans l'élément de liste. Ce serait assez difficile sans nos pseudo amis sélecteurs.
Étape 2: Menu de démarrage CSS
Pour commencer le CSS, nous aurons besoin de styler la zone de menu dans son ensemble. Chaque élément de menu aura une hauteur de 100px et une largeur de 200px et nous en aurons trois. Cela nous donne une surface totale de 100px par 600px pour le menu dans son ensemble. Ajoutez dix pixels de remplissage pour chacun des trois éléments et notre total général passe à 100 pixels par 630 pixels.
Après avoir réglé la hauteur et la largeur, j'ai simplement centré le menu avec son texte et masqué le débordement, ce qui sera important pour l'animation plus tard.
Étape 3: Style des liens
Ensuite, nous clouons l'esthétique des éléments de menu. Nous ciblons d’abord les éléments de la liste et les faisons flotter à gauche avec quelques marges. Ensuite, nous suivons cela en appelant tous les liens du menu.
Nous avons essentiellement transformé chaque lien en un gros bloc rouge:
Notez que ce style a effectivement coupé le deuxième lien de chaque ensemble. En réalité, le deuxième lien de chaque élément de la liste est empilé sous le premier et est simplement masqué. Si nous désactivons temporairement? Overflow: hidden? cela devient beaucoup plus facile à visualiser.
Étape 4: Modifier les styles de lien secondaires
Remarquez dans l'image ci-dessus que, bien qu'ils aient un texte différent, les liens supérieur et inférieur sont essentiellement identiques. Modifions cela un peu pour rendre la transition plus visible. Pour ce faire, nous modifions simplement la deuxième zone de chaque jeu en noir et le texte en blanc.
La difficulté est de savoir comment cibler uniquement le deuxième lien. Nous n'avons rien inclus dans le code HTML pour différencier les deux: pas de classes, pas d'identifiants, rien. C’est là que ces pseudo-sélecteurs si pratiques entrent en jeu! En utilisant des pseudo-sélecteurs, nous pouvons facilement cibler tous les autres liens grâce à l’utilisation de pairs ou impairs.
Ce sélecteur semble un peu compliqué alors parcourons-le. Nous ciblons d'abord l'ID de menu, puis nous explorons la liste non ordonnée et plus particulièrement les balises d'ancrage de cette liste. Ensuite, nous ajoutons notre pseudo sélecteur?: Nth-of-type (pair) ?, qui cible uniquement le deuxième lien de chacun de nos ensembles de liens.
Maintenant, nous pouvons mélanger certains styles pour les distinguer des blocs rouges:
Maintenant, si nous commentons à nouveau temporairement? Overflow: hidden? nous pouvons voir que nos liens ont beaucoup plus de différenciation.
Étape 5: Actionnez la diapositive
Il est maintenant temps de définir l'action qui se déroulera en stationnaire. Fondamentalement, nous voulons que le lien rouge glisse vers le haut et disparaisse lorsque le lien noir apparaît.
Cela semble assez facile, mais une fois que vous y réfléchissez vraiment, cette action devient très délicate! Nous voulons que le lien supérieur glisse vers le haut lorsque nous survolons le bouton, mais comme il glisse hors de vue, vous ne le survolerez plus, ce qui provoquera des actions très problématiques.
Après mûre réflexion, je suis parvenu à la conclusion suivante. Nous devons cibler l’ensemble de l’élément de la liste pour l’événement de survol. Ainsi, que le lien supérieur ou inférieur soit visible, tout fonctionne toujours. Cependant, même si le survol de l'élément de liste doit déclencher l'événement, il s'agit en réalité d'un autre élément, le premier lien, qui doit être déplacé.
Traduire ces objectifs en CSS ressemble à ceci:
Beaucoup de gens ne s'en rendent pas compte, mais vous n'avez pas à agir sur l'élément pour lequel vous avez défini l'état de survol. Ici, nous allons déclencher le survol sur l'élément de liste, mais en déplaçant le premier enfant (pseudo sélecteur de remerciement) de cet élément, qui dans ce cas sera ce lien supérieur.
Pour que cette transition se déroule sans heurts, nous revisitons le code de l'étape 3 et ajoutons quelques jolies transitions CSS3.
Fini! Version du pseudo sélecteur
Avec cela, notre première version est complète! Nos animations ont fière allure et les pseudo-sélecteurs font le gros travail pour garder notre balisage propre et net.
Démo: Cliquez ici pour lancer.
Télécharger: Cliquez ici pour télécharger les trois versions.
Éliminer les pseudo-sélecteurs
Personnellement, j'adore les pseudo-sélecteurs, les sélecteurs d'attributs et tous les autres avantages fournis par CSS3. Le support est en fait assez bon pour eux dans tous les domaines, avec à peu près tous les principaux navigateurs, y compris IE9!
Cependant, le pire navigateur de l’histoire n’aurait pas été aussi simple à utiliser, et bien entendu, tout ce qui est plus ancien que IE9 aurait des problèmes avec ces sélecteurs. Étant donné que la plupart des gens viennent tout juste de supprimer le support IE6, nous risquons d’ignorer IE6 et IE7 dans des années.
Si vous souhaitez implémenter ce menu dans un projet réel, il est probablement préférable d'utiliser des classes dans votre code HTML. Voyons comment cela fonctionne.
HTML
À la lumière de notre décision de jeter nos pseudo sélecteurs expérimentaux, nous devrons ajouter une classe supplémentaire pour aider à cibler le premier lien sans affecter le second de chaque élément de la liste. Ici, je viens de lancer dans un? Top? classe sur chaque lien qui se trouve sur le dessus.
CSS
Maintenant, avec ce balisage supplémentaire en place, nous n’avons plus besoin des pseudo-sélecteurs dans notre CSS. Nous pouvons simplement utiliser des classes qui ont un support universel.
Fini! Version non pseudo-sélecteur
Notre deuxième version est complète! Pour ceux d'entre vous qui n'apprécient pas les pseudo sélecteurs, voici une version sans eux.
Démo: Cliquez ici pour lancer.
Télécharger: Cliquez ici pour télécharger les trois versions.
Utiliser jQuery pour les animations
Enfin, vous pouvez supprimer les animations CSS et effectuer les mêmes actions avec jQuery (ou peut-être utiliser jQuery comme solution de secours via Modernizr).
En vous basant sur la version précédente, sans pseudo-sélecteur, désactivez les animations CSS et lancez dans cette partie de jQuery:
Comme vous pouvez le constater, l’effet de survol de l’élément de la liste a été activé et la transition s’anime exactement comme nous l’avons fait en CSS. Les résultats sont presque identiques et devraient fonctionner dans à peu près tous les navigateurs, à condition que JavaScript ne soit pas désactivé.
Ma version originale était un peu bizarre avec la répétition d'animations, donc un grand chapeau à Adrian Pelletier, qui a un projet similaire qui m'a rappelé de lancer la fonction d'arrêt jQuery!
Fini! Version jQuery
Notre version finale utilise la même structure que la précédente, mais jette les transitions CSS en faveur de jQuery. Regarde.
Démo: Cliquez ici pour lancer.
Télécharger: Cliquez ici pour télécharger les trois versions.
Conclusion
Ce didacticiel vous a présenté non pas une mais trois méthodes différentes pour obtenir le même menu animé glissant génial. La première version illustre parfaitement l’utilité des pseudo-sélecteurs dans les projets réels. Le second supprime les pseudo-sélecteurs pour ceux qui recherchent une version plus largement compatible. La version finale utilise jQuery pour les animations au lieu des transitions CSS3.
Laissez un commentaire ci-dessous et indiquez-nous la version que vous utiliseriez aujourd'hui sur votre site ou comment vous la modifieriez!