Que le menu de navigation de votre site Web soit une ligne horizontale en haut ou une ligne verticale sur le côté, il ne s'agit que d'une liste. Lors de la conception navigation sur le Web, un menu de navigation est un groupe de liens. Lorsque vous programmez votre navigation en XHTML+CSS, vous pouvez créer un menu petit à télécharger (XHTML) et facile à personnaliser (CSS).
Commencer
Pour concevoir une liste de navigation, vous devez utiliser une liste. Il peut s'agir d'une liste non ordonnée standard qui a été identifiée comme la navigation. Par example:
- Domicile
- Des produits
- Prestations de service
- Nous contacter
Lorsque vous regardez le code HTML, le lien Accueil a un ID de.
Tu es là
Cela vous permet de créer un menu qui identifie l'emplacement actuel pour vos lecteurs. Même si vous ne prévoyez pas d'avoir ce type de repère visuel sur votre site pour le moment, vous pouvez inclure ces informations. Si vous décidez d'ajouter la queue plus tard, vous aurez moins de code pour préparer votre site.
Sans aucun Style CSS, ce menu XHTML ressemble à une liste non ordonnée standard. Il y a des puces et les éléments de la liste sont légèrement en retrait. Lors de l'utilisation liens d'espace réservé, la plupart des navigateurs n'affichent pas les liens comme cliquables (soulignés et en bleu). Lorsque vous collez le code HTML dans une page Web, votre navigation ressemble à ceci:
- Domicile
- Des produits
- Prestations de service
- Nous contacter
Cela ne ressemble pas beaucoup à un menu. Cependant, avec quelques styles CSS ajoutés à la liste, vous pouvez créer un menu qui vous rendra fier.
Si vous souhaitez plus d'exemples de menus verticaux, effectuez une recherche sur le Web pour les éléments suivants:
- Un menu vertical stylé
- Un modèle de menu vertical de base
- Un menu vertical stylisé avec You Are Here
- Un modèle de menu vertical de base avec You Are Here
Menu de navigation verticale
Un menu de navigation vertical est facile à écrire car il s'affiche de la même manière qu'une liste normale: haut et bas. Les éléments de la liste s'affichent verticalement en bas de la page.
Lorsque vous stylisez des menus, commencez par l'extérieur et travaillez à l'intérieur. Tout d'abord, stylisez la navigation:
ul#navigation
Ensuite, passez aux éléments et aux liens. Tout d'abord, définissez la largeur du menu. Cela garantit que si les éléments de menu sont longs, les éléments ne pousseront pas le reste de la mise en page ou ne provoqueront pas de défilement horizontal.
ul#navigation { largeur: 12em; }
Après avoir défini la largeur, travaillez sur les éléments de la liste. Cela vous permet de définir des éléments tels que les couleurs d'arrière-plan, les bordures, l'alignement du texte et les marges.
ul#navigation li {
style de liste: aucun ;
couleur d'arrière-plan: #039 ;
border-top: solide 1px #039 ;
text-align: gauche ;
marge: 0 ;
}
Après avoir défini les bases des éléments de la liste, travaillez sur l'apparence du menu dans la zone des liens. Commencez par styliser la navigation:
UL#navigation LI A
Ensuite, stylisez ce qui suit:
Un lien
A: visité
A: survoler
A: actif
Pour les liens, faites des liens un élément de bloc (plutôt que l'élément en ligne par défaut). Cela oblige les liens à occuper tout l'espace du LI et à agir comme un paragraphe, ce qui facilite le style des liens en tant que boutons de menu. Ensuite, supprimez les éléments suivants:
soulignement, décoration de texte: aucun; comme
Cela fait que les boutons ressemblent plus à des boutons. Votre conception peut être différente.
ul#navigation li a {
bloc de visualisation;
texte-décoration: aucun ;
rembourrage: .25em ;
bordure inférieure: solide 1px #39f ;
bordure droite: solide 1px #39f ;
}
Avec le bloc de visualisation; défini sur les liens, toute la zone de l'élément de menu est cliquable, pas seulement les lettres. C'est aussi bon pour la convivialité. Définissez les couleurs des liens (lien, visité, survol et actif) si vous souhaitez que les liens soient différents du bleu, du rouge et du violet par défaut.
a: lien, a: visité { couleur: #fff; }
a: survol, a: active { couleur: #000; }
Vous pouvez également donner un peu d'attention à l'état de survol en changeant la couleur d'arrière-plan.
a: hover { background-color: #fff; }
Menu de navigation horizontale
La création de menus de navigation horizontaux est légèrement plus difficile que les menus de navigation verticaux car vous devez compenser le fait que les listes HTML préfèrent s'afficher verticalement. Comme pour le menu horizontal, créez la liste du menu de navigation:
- Domicile
- Des produits
- Prestations de service
- Nous contacter
Pour créer un menu horizontal, procédez comme vous l'avez fait avec le menu vertical. Commencez par l'extérieur et travaillez à l'intérieur. Pour démarrer la navigation dans le coin gauche, définissez-le avec une marge gauche et un remplissage à 0, et faites-le flotter vers la gauche.
Prenez l'habitude de régler la largeur de manière à ce que votre menu ne prenne pas plus ou moins de place que prévu. Pour les menus horizontaux, il s'agit généralement de toute la largeur du dessin. Vous pouvez également ajouter une couleur de fond à la liste pour en faciliter la lecture.
ul#navigation {
flotteur: gauche ;
marge: 0 ;
remplissage: 0 ;
largeur: 100 % ;
couleur d'arrière-plan: #039 ;
}
Le secret du menu de navigation horizontale réside dans les éléments de la liste. Les éléments de liste sont normalement des éléments de bloc, ce qui signifie que ces éléments ont une nouvelle ligne placée avant et après chacun. En faisant passer l'affichage de bloc à en ligne, vous forcez les éléments de la liste à s'aligner horizontalement les uns à côté des autres.
ul#navigation li { display: inline; }
Traitez les liens exactement comme le menu de navigation vertical, avec les mêmes couleurs et la même décoration de texte. Ajoutez une bordure supérieure pour délimiter les boutons lorsque l'utilisateur survole un bouton. Ensuite, retirez bloc de visualisation; car cela remet les nouvelles lignes et détruit le menu horizontal.
Vous êtes ici Informations de localisation
Un autre aspect du HTML est cet identifiant:
Tu es là
Si vous souhaitez modifier votre menu pour indiquer l'emplacement actuel de vos utilisateurs, utilisez cet identifiant pour définir une couleur de fond différente ou un autre style. Déplacez cet ID d'attribut vers l'élément de menu correct sur d'autres pages afin que la page actuelle soit toujours mise en surbrillance.
Si vous regroupez ces styles sur votre page, vous pouvez créer une barre de menus horizontale ou verticale qui fonctionne avec votre site et est rapide à télécharger et facile à mettre à jour. L'utilisation de XHTML+CSS transforme vos listes en un puissant outil de conception.
Si vous souhaitez plus d'exemples de menus horizontaux, recherchez les éléments suivants sur le Web:
- Un menu horizontal stylisé
- Un modèle de menu horizontal de base
- Un menu horizontal stylisé avec You Are Here
- Un modèle de menu horizontal de base avec You Are Here