Tous les sites web ont besoin d'un menu de navigation lorsqu'ils comportent plusieurs pages.
Vous pouvez créer un menu de navigation simple permettant de parcourir facilement le site, avec CSS, les listes et l'élément nav.
N'hésitez pas à télécharger et décompresser les fichiers du projet pour suivre le tutoriel.
On a là une page presque terminée.
Je vais appliquer des styles à cette liste non triée et la convertir en menu de navigation principal pour la page.
En mode Fractionné, on voit que la liste non triée est contenue dans l'élément nav de la page.
La section nav contient les principaux liens de navigation.
J'ai déjà ajouté les liens d'ancrage pour convertir ces éléments de liste en hyperliens.
Si je lance l'aperçu de ce fichier dans un navigateur web en choisissant Aperçu dans le navigateur dans le menu Fichier, je peux tester les liens.
Vous voyez qu'ils fonctionnent.
En revanche, le résultat ne ressemble pas encore à un menu de page.
Retournons dans Dreamweaver pour arranger tout ça.
J'ai pris de l'avance en définissant une règle CSS pour le sélecteur nav.
Je vais lancer une recherche dans CSS Designer pour vous montrer.
Voilà, je peux ainsi le positionner à droite sur la page, comme je voulais.
Intéressons-nous à présent aux autres propriétés qu'on peut ajouter pour donner au menu un style approprié.
Je vais commencer par supprimer les puces en définissant une propriété pour toute la liste.
Je sélectionne style.css dans CSS Designer, puis je sélectionne mon fichier CSS pour voir les changements appliqués en temps réel.
Je retourne dans CSS Designer et j'ajoute un sélecteur ul.
Ensuite, je vais dans la catégorie Texte des propriétés et je définis list-style-type sur none.
Les puces ont disparu mais les éléments de liste sont toujours empilés.
Certains éléments HTML comme les éléments de liste affichent une nouvelle ligne par défaut, sauf si vous utilisez CSS pour spécifier un autre comportement.
Pour ce faire, je vais mettre à jour le sélecteur li actuel, qui applique des styles aux propriétés de police et d'espacement.
J'ajoute la propriété display et je définis sa valeur sur inline-block.
Les éléments de liste s'affichent maintenant côte à côte sur la même ligne.
Pour terminer, je vais ajouter du code CSS pour que la couleur du texte change lors du survol du menu.
Les pseudosélecteurs permettent d'appliquer des styles à un élément dont l'état change, par exemple lors du survol d'un lien.
Ajoutons un pseudosélecteur pour l'ancrage, soit le sélecteur A.
Pour ce faire, dans CSS Designer, j'ajoute un nouveau sélecteur en tapant le nom de la balise d'ancrage, c'est-à-dire a, une virgule, puis l'opération, ici « hover ».
Ensuite, dans la catégorie Texte, je définis la couleur sur rouge.
À présent, quand je survole les éléments de liste en mode Affichage en direct, je vois un changement subtil qui améliore l'apparence et l'expérience utilisateur.
Le menu de navigation sur votre page peut avoir différentes propriétés telles que le nombre d'éléments de menu, les couleurs et le positionnement sur la page, mais vous pouvez adopter les techniques générales abordées dans ce tutoriel pour appliquer des styles au menu sur d'autres pages.
Vous pouvez également explorer les transitions CSS pour appliquer différents effets au menu lors des interactions du visiteur avec le contenu de la page.
