Que votre menu de navigation soit une ligne horizontale en haut ou une ligne verticale sur le côté, il ne s'agit toujours que d'une liste. Lors de la conception d'une navigation Web, il est souvent facile d'oublier qu'un menu de navigation est simplement un groupe de liens enrichi. Mais si vous programmez votre navigation à l'aide de XHTML + CSS, vous pouvez créer un menu compact à télécharger (le XHTML) et facile à personnaliser (le CSS).
Commencer
Pour commencer à concevoir une liste pour la navigation, vous devez utiliser une liste. Ce peut être une liste standard non ordonnée qui a été identifiée comme étant la navigation:
Si vous regardez attentivement le code HTML, vous remarquerez que le lien "Accueil" a également un identifiant de
Tu es là. Cela vous permettra de créer un menu identifiant l'emplacement actuel de 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 cette information. Si vous décidez d'ajouter la cue plus tard, vous aurez moins de code pour préparer votre site.
Sans style CSS, ce menu XHTML ressemble à une liste standard non ordonnée. Il y a des puces et les éléments de la liste sont légèrement en retrait. Comme j'utilise des liens fictifs, la plupart des navigateurs ne les affichent pas comme cliquables (soulignés et en bleu). Si vous collez le code HTML ci-dessus dans une page Web, votre navigation ressemblera à ceci:
- Accueil
- Des produits
- Prestations de service
- Contactez nous
C'est assez ennuyeux et ne ressemble pas beaucoup à un menu. Mais avec seulement quelques styles CSS ajoutés à la liste, vous pouvez créer un menu qui vous rend fier.
Menu de navigation verticale
Un menu de navigation vertical est très facile à écrire car il s’affiche de la même manière qu’une liste normale: de haut en bas. Les éléments de la liste apparaissent verticalement en bas de la page.
Lorsque je dessine des menus, j’aime commencer par l’extérieur et y travailler. Par là, je veux dire que j’appelle
ul # navigation puis passer à la
li éléments puis les liens, etc. Donc pour ce menu, vous définissez d’abord la largeur du menu. Cela garantira que même si les éléments de menu sont longs, ils ne déplacent pas le reste de la mise en page et ne provoquent pas de défilement horizontal.
ul # navigation {width: 12em; }
Une fois la largeur définie, je peux jouer avec les éléments de la liste. Cela me permet de définir des éléments tels que (pour supprimer les puces), les couleurs d'arrière-plan, les bordures, l'alignement du texte et les marges.
ul # navigation li {style de liste: aucun;couleur de fond: # 039;border-top: solide 1px # 039;text-align: left;marge: 0;} Une fois que vous avez défini les bases pour les éléments de la liste, vous pouvez commencer à jouer avec l’affichage du menu dans la zone des liens. Premier style le UL # navigation LI Aet puis le Un lien, A: visité, Un vol stationnaire, et A: actif (si vous les voulez) Pour les liens, j'aime bien faire des liens un élément de bloc (plutôt que l'élément par défaut). Cela les oblige à occuper tout l'espace de la LI-Et ils agissent plutôt comme un paragraphe, ce qui les rend plus faciles à appeler comme des boutons de menu.L'autre chose que je fais toujours est de supprimer le soulignement ( texte-décoration: aucun;), car cela fait que les boutons ressemblent plus à des boutons pour moi. Mais bien sûr, votre conception pourrait être différente. ul # navigation li a {bloc de visualisation;texte-décoration: aucun;rembourrage: 0,25 um;border-bottom: solide 1px # 39f;border-right: solide 1px # 39f;} Remarquez qu'avec le bloc de visualisation; définir sur les liens, la boîte entière de l'élément de menu est cliquable, pas seulement les lettres. C'est aussi bon pour la facilité d'utilisation. Assurez-vous de définir les couleurs du lien (lien, visité, survol et actif) si vous souhaitez qu'elles soient différentes des couleurs par défaut bleue, rouge et violette. a: lien, a: visité {color: #fff; }a: survol, a: actif {color: # 000; } J'aime aussi accorder un peu plus d'attention à l'état de survol en modifiant la couleur de fond. a: hover {background-color: #fff; } Si vous souhaitez plus d'exemples de menus verticaux, consultez la liste ci-dessous. La création de menus de navigation horizontaux est légèrement plus difficile que les menus de navigation verticale, car vous devez compenser le fait que les listes HTML préfèrent être affichées verticalement. Comme pour le menu horizontal, créez d'abord votre liste de menus de navigation:
Pour créer un menu horizontal, procédez comme pour le menu vertical. Commencez par l'extérieur et travaillez dedans. Comme je veux que ma navigation commence dans le coin gauche, je la règle avec une marge gauche et un remplissage, et je la laisse flotter à gauche. Vous devez également prendre l’habitude de régler la largeur afin que votre menu ne prenne pas plus ou moins de place que vous le souhaitez. Pour les menus horizontaux, il s’agit généralement de toute la largeur du dessin. J'ai également ajouté une couleur de fond à la liste complète pour la rendre plus facile à lire. ul # navigation {float: gauche;marge: 0;rembourrage: 0;largeur: 100%;couleur de fond: # 039;} Mais le secret du menu de navigation horizontale se trouve dans les éléments de la liste. Les éléments de liste sont normalement des éléments de bloc, ce qui signifie qu’ils auront une nouvelle ligne placée avant et après chaque élément. En commutant l'affichage de bloc à en ligne, vous forcez les éléments de la liste à s’aligner horizontalement. ul # navigation li {display: inline; } J'ai traité les liens exactement comme je les ai traités dans le menu de navigation verticale, avec les mêmes couleurs et la même décoration de texte. J'ai ajouté une bordure supérieure pour délimiter les boutons lorsqu'ils sont survolés. La seule chose enlevée était le bloc de visualisation; car cela remettra les nouvelles lignes et détruira le menu horizontal. ul # navigation li a {texte-décoration: aucun;rembourrage: .25em 1em;border-bottom: solide 1px # 39f;border-top: solide 1px # 39f;border-right: solide 1px # 39f;}a: lien, a: visité {color: #fff; }ul # navigation li a: hover {couleur d'arrière-plan: #fff;couleur: # 000;} Un autre aspect du HTML est l'identifiant Tu es là. Si vous souhaitez modifier votre menu pour indiquer l'emplacement actuel de vos utilisateurs, utilisez simplement cette option. ID pour définir une couleur d'arrière-plan différente ou un autre style. Déplacer cet attribut ID à l'élément de menu correct sur les autres pages afin que la page en cours soit toujours mise en surbrillance. ul # navigation li # vous êtes ici un {background-color: # 09f; } Si vous regroupez ces styles sur votre page, vous pouvez créer une barre de menu horizontale ou verticale qui fonctionne avec votre site, mais qui est rapide à télécharger et très facile à mettre à jour ultérieurement. L'utilisation de XHTML + CSS transforme vos listes en un outil très puissant pour la conception. Si vous souhaitez davantage d’exemples de menus horizontaux, consultez la section suivante.
Menu de navigation horizontale
Vous êtes ici Informations sur l'emplacement
