Salut, bienvenue.
Devine quoi ?
Nous allons en faire une autre, et
notre dernière barre de navigation ensemble, dans cette revue de code.
Celui-ci, cependant, est un peu différent, non seulement pour
la façon dont nous avons mis en place les choses, mais parce que je veux vous parler de
l'accessibilité du nombre de personnes qui font leurs barres de navigation.
La nouvelle façon,
j'ai utilisé de cette façon, est de créer vos liens de navigation dans le cadre de listes.
Donc vous pouvez voir, nous l'avons déjà un peu différent par ici.
J' ai une liste non ordonnée avec un, deux, trois, quatre éléments une liste, et
certains de ces éléments de liste ont eux-mêmes des listes non ordonnées.
Donc, alors que c'est très commun,
il y a quelques problèmes de convivialité, quand vous vous rendez compte, ce sont vraiment des listes ?
Parce que si ce n'est pas le cas, c'est une balise sémantique que nous utilisons, que nous voulions peut-être éviter.
Mais c'est si commun, je veux te le montrer et te laisser jouer avec et
prendre tes propres décisions.
L' autre problème lorsque nous faisons cette barre de navigation déroulante,
a à voir avec l'accessibilité des personnes pouvant
survoler certaines choses que vous voulez activer.
Je pense que nous avons tous été là, quand nous avons été dans une page Web et
que nous essayons de survoler quelque chose pour cliquer sur un lien.
Et ça continue à éclater parce que notre main est trop tremblante ou
nous devons planer sur trois choses en même temps.
Encore une fois, alors que c'est une technique que je veux partager avec vous et
vous aider à comprendre, j'espère que vous allez vous assurer que toutes les applications que vous faites,
vous faites de votre mieux pour vous assurer qu'elle est aussi accessible que possible.
Donc encore une fois, commençons avec ce code HTML simple et ennuyeux, et
voyons si nous ne pouvons pas le faire ressembler à quelque chose d'un peu plus excitant.
Ce que nous avons ici, c'est une barre de navigation horizontale
qui va avoir des éléments déroulants.
Donc, quand je vais sur Home, il n'y a rien de plus à voir, mais, quand je vais sur
Pictures, vous pouvez voir que j'ai trois liens supplémentaires que je peux essayer de faire, et de
même avec Recettes, et Contact, encore une fois, est tout seul.
Alors, comment ai-je fait ça ?
Comment l'ai-je eu pour que les 2015, 14 et 13 ne se présentent pas à moins que je ne bouge ?
Et la même chose avec les recettes ?
Jetons un coup d'oeil.
Très bien, je vais sauter le corps dans la navigation
parce que je pense que vous savez comment faire tout ça.
Au lieu de cela, parlons des différentes listes elles-mêmes.
Désolé, listez les éléments eux-mêmes dans les liens.
Ce que j'ai fait, c'est que je suis allé ici, pour que
vous puissiez voir les deux en même temps.
Et c'est très faible, et j'aurais aimé avoir fait une couleur différente maintenant.
Mais j'ai une frontière entre chacune de ces options.
Ça aurait été un peu bizarre pour
moi d'avoir une frontière juste ici le long du côté.
Donc ce que je devais faire c'est que je suis allé et j'ai dit que tu sais quoi ?
Pour ce dernier élément de liste, le tout dernier, ne mettons pas de bordure.
C' est ces petits réglages que vous pouvez mettre dans votre code
pour le rendre un peu plus professionnel.
Nous ne voulons pas non plus de frontières sur les sous-articles, n'est-ce pas ?
Parce qu'il n'y a rien.
Puisqu' ils sont bloqués, nous n'avons pas besoin de frontières sur le côté.
Alors, j'ai fait la même chose ici, où j'ai dit, tu sais quoi ?
Je ne veux pas utiliser de frontières ici.
Assez franchement, j'espère.
Maintenant, regardons à nouveau.
J' ai fait un style simple sur mes liens de navigation, d'accord ?
La seule chose que j'ai faite est, encore une fois,
que je voulais vous montrer un exemple d'utilisation de la transition.
La transition ici est ce qui change lentement la couleur lorsque vous passez la souris sur,
plutôt qu'un changement rapide.
Donc vous pouvez voir, c'est un peu plus progressif que soudain, d'accord ?
L' actif est comme la dernière fois.
Maintenant, voici la partie intéressante.
On va parler des sous-menus, d'accord ?
Alors, comment le navigateur sait-il quand quelque chose est un sous-menu ?
Eh bien, il peut regarder le DOM, et il peut regarder vers le bas et aller, oh, je suis dans la navigation.
Et maintenant je suis dans une liste non ordonnée, et je suis dans un élément de liste.
S' il trouve un autre élément de liste plus bas, c'est un peu enchaîné,
il sait, oh, oh, je suis dans un sous-menu.
Donc ici, il sait que je suis dans la navigation, je suis à l'intérieur d'une liste,
et j'ai trouvé une liste non ordonnée à l'intérieur de là.
Donc, comment nous l'avons configuré pour qu'il ne s'affiche pas au début est que j'ai
défini la position sur absolue, et j'ai réglé l'affichage sur none.
Donc, il ne va pas apparaître par défaut.
Ça ne va pas arriver.
D' accord ?
Alors, comment puis-je l'obtenir pour
que ça arrive soudainement si on veut faire quelque chose dans ce sens ?
Eh bien, nous voulons savoir comment le changer ici, quand je passe la souris sur un élément de liste
qui a une liste non ordonnée en dessous, changer cet affichage de zéro en bloc.
Donc, ces deux lignes de code ici, c'est vraiment la configuration.
Donc, quand je vais ici, par défaut, l'
affichage est nul, mais quand je survol, l'affichage devient bloc.
C' est un code très simple, très court, très puissant concept à comprendre.
Donc, je vous ai montré quelques façons différentes de styliser vos barres de navigation.
Nous avons horizontal, nous avons vertical, nous avons descendu.
J' espère vraiment que vous choisirez un que vous vous sentez le plus à l'aise avec, ou
en fait vraiment, le plus excité, et en créerez un pour
votre projet final ici dans cette classe CSS.
Ne vous inquiétez pas si vous rencontrez des problèmes.
Publier sur le forum de discussion.
Allez en ligne et cherchez des réponses.
Mais ce que j'espère vraiment, c'est que vous pouvez créer quelque chose dont vous êtes fier,
qui est à la fois beau et accessible.
Bonne chance.