Menus avec couleur

Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.

Un menu simple dans l'entête

Le menu dans l'entête permet de diriger les visiteurs vers les liens importants de votre site. Il peut être insérer dans le haut de la bannière, en sont centre ou sous celle-ci.

Ce menu est ce qui l'y a de plus simple et est très léger du fait qu'il ne comporte que des couleurs. Il ne vous reste plus qu'à le personnaliser pour bien l'agencer à votre bannière.

Si vous avez choisi d'insérer une bannière sur la page XHTML (Insérer une bannière), copier simplement le modèle plus bas avec son CSS et agencer les couleurs pour qu'elle s'harmonise bien avec l'ensemble.

Si vous avez choisi d'insérer votre bannière à partir du CSS (Bannière en arrière-plan), vous pouvez insérer le même modèle avec son CSS, mais agencer ou supprimer les valeurs des couleurs pour que le menu s’harmonise bien avec le visuel que vous recherchez. Vous pouvez même choisir la transparence pour que seul le texte soi visible afin que le menu se fonde dans la bannière.

Exemple de menu :

Dans le XHTML.

Copier ce qui suit dans le XHTML (ne tenez pas compte des numéros de ligne).

1
2
3
4
5
6
7
8
9
10
11
12

<!-- Espace réserver au menu -->
<div id="menu_top">
  <ul id="gauche">
    <li id="actif"><a href="index.html" title="Bienvenue" >Accueil</a></li>
    <li><a href="tab_mat.html" title="Table des matières" >Table des matières</a></li>
    <li><a href="service.html" title="Nos services" >Service</a></li>
  </ul>
  <ul id="droit">
    <li><a href="contact.html" title="Pour me joindre" >Contact</a></li>
    <li><a href="plan.html" title="plan du site" >Plan du site</a></li>
  </ul>
</div>

Avant de copier les paramètres CSS de ce menu, regardez le résultat. Sans CSS, cette liste est affichée verticalement avec une puce devant chaque lien, le texte est bleu et souligné. C'est le navigateur qui détermine ses paramètres par défaut pour les listes de liens.

Dans le CSS.

Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

/* Espace réserver au menu */
#menu_top {
background-color:#036;
width:800px;
height:38px;
margin:0;
padding:0
}

#gauche{
float:left
}

#droit {
float:right
}

#menu_top ul {
list-style:none;
margin:0;
padding:10px 5px
}

#menu_top li {
display:inline;
padding:0 8px
}

#menu_top a {
color:#fff;
text-decoration:none;
border:1px solid #036;
padding:6px 10px
}

#menu_top a:hover {
color:#fff;
background-color:#903;
border:1px solid #fff
}

#actif a {
color:#fff;
background-color:#903;
border:1px solid #07b
}

Les balises utilisées dans le XHTML

Les menus sont essentiellement construits de la même façon. Vous créez un nouveau conteneur, par exemple <div id="menu_top"> en prennent soin de bien fermer la balise avec </div>. Les paramètres CSS qui lui seront attribués détermineront son positionnement, l'espace qu'il occupera, la couleur ou la texture qu'il aura en arrière-plan. Le cas échéant, vous pouvez changer la police et la couleur des caractères.

Positionnement :

Il arrive très souvent que l'image qui sert de bannière soit en arrière-plan pour permettre d'insérer un logo, un texte ou un menu. Si c'est votre cas, vous devrez positionner votre menu et modifier quelque paramètre dans le CSS.

Remplacer les lignes 1 à 8 de notre modèle.

1
2
3
4
5
6
7
8
9

/* Espace réserver au menu */
#menu_top {
background-color:#036;
width:800px;
height:38px;
position:absolute
margin:20px auto 0;
padding:0
}

Les attributs position et margin permettent de positionner le menu très précisément ou vous le désirer. N'hésiter pas à modifier la valeur 20px (20 pixels) de la propriété margin.

Les listes

Bien que les éléments servant à créer ce menu soit en réalité une liste, ils sont placés les uns à côté des autres. Cela est rendu possible grâce à la propriété display:inline (ligne 25).

Une liste non ordonnée débute toujours par <ul> et ajoute systématiquement des puces par défaut aux éléments de la liste qui la composent en opposition à <ol> qui est une liste ordonnée et qui numérote chaque élément de la liste. Dans le menu nous n'avons pas besoin de puce. Nous lès avons donc supprimé (voir list-style:none sur la ligne 19).

La balise <ul> a un identifiant (id) gauche et droit ce qui permet de diviser le menu en deux à partir du CSS. Dans le menu, « Accueil » est en rouge parce que <li id="actif"> lui est attribué (ligne 4). Sur la page « Table des matières », insérez le même identifiant « actif » tout en supprimant celui de « index » et faite de même pour tous les autres. Lorsque vous serez sur une des pages contenues dans le menu, il sera en rouge.

Nous verrons plus loin comment utiliser tous les éléments d'une liste.

Le CSS

La meilleure façon de comprendre l'interaction entre le CSS et le XHTML est de modifier la valeur d'un attribut. Amusez-vous !

Menu non divisé

Dans le tutoriel "La méthode complète", au moment d'insérer un menu horizontal sous la bannière, vous insérez dans la balise <ul> un gauche et un droite qui génère un espace les éléments de liste placés dans chacune de ces deux "catégories". Quel serait le moyen pour que l'espace horizontal soit réparti de manière égale entre tous les éléments de la liste, remplissant ainsi automatiquement l'espace à disposition choisi. En attendant votre réponse, mes salutations les meilleures. Yves

Pour avoir le même menu sans le diviser il faut remplacer le HTML par :

1
2
3
4
5
6
7
8
9
10

<!-- Espace réserver au menu -->
<div id="menu_top">
  <ul;>
    <li id="actif"><a href="index.html" title="Bienvenue" >Accueil</a></li>
    <li><a href="tab_mat.html" title="Table des matières" >Table des matières</a></li>
    <li><a href="service.html" title="Nos services" >Service</a></li>
    <li><a href="contact.html" title="Pour me joindre" >Contact</a></li>
    <li><a href="plan.html" title="plan du site" >Plan du site</a></li>
  </ul>
</div>

Dans le CSS il faut supprimer :

1
2
3
4
5
6
7

#gauche{
float:left
}

#droit {
float:right
}

Voyons maintenant un menu plus élaboré.

LE CONCEPTEUR DE SITE WEB.com

Pour un site professionnel

 514 363-4169
 serge@leconcepteur.ca