Menu vertical simple avec couleur

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

Menu vertical simple avec couleur

Un menu vertical peut être inséré à gauche ou à droite du conteneur principal, le corps de la page. Il a pour principale tâche de faciliter la navigation à l'intérieur de votre site, mais aussi à l'extérieur si par exemple, vous invitez le visiteur à consulter un article ou un service sur un autre site.

Onglet toujours visible.

Lorsqu'un visiteur ouvre l'une des pages de votre site, les navigateurs récents lui attribuent un onglet. Cet onglet reste visible tant que le visiteur demeure sur votre site. Mais si un lien conventionnel dirige le visiteur temporairement vers un autre site, il est remplacé par celui-ci à moins que le navigateur soit configuré en conséquence. Les liens vers l'extérieur de ce menu sont donc conçu de façon à ce que vous puissiez conserver votre onglet permettent au visiteur de revenir simplement en cliquant sur votre onglet.

Vous pouvez aussi utiliser cette structure de lien n’importe où sur votre site.

Un lien vers un site extérieur :

1

<a href="http://www.lien_ext.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" title="Futur lien extérieur">Lien vers l'extérieur 1</a>

Bien que ce menu soit assez simple et disons-le, pas tellement joli, il comprend tout de même quelques points intéressants. Les puces ont été remplacées par des icônes et vous pourrez insérer votre adresse courriel. Il ne vous reste plus qu'à agencer les couleurs avec votre page.

Si vous voulez la puce, télécharger et décompresser l'archive Winrar dans votre dossier «icones» (facultatif).

Télécharger le calque ici.

Résultat attendu :

Remarquer les lignes 16 et 17. La fonction onclick permet de conserver l'onglet du navigateur sur votre site même si vous avez besoin de rediriger le visiteur vers un autre site. Cette fonction est un script intégrer aux navigateurs.

Copier ce qui suit sur la page XHTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
15
16
17
18
19
20
21
22
23
24

<!-- Espace réserver au menu -->
<div id="side-nav">
 <div id="nav">
  <h4>Titre du menu 1</h4>
  <ul>
   <li><a href="lien_1.html" title="Futur lien">Lien interne 1</a> </li>
   <li><a href="lien_2.html" title="Futur lien">Lien interne 2</a> </li>
   <li><a href="lien_3.html" title="Futur lien">Lien interne 3</a> </li>
   <li><a href="lien_4.html" title="Futur lien">Lien interne 4</a> </li>
   <li><a href="lien_5.html" title="Futur lien">Lien interne 5</a> </li>
   <li><a href="lien_6.html" title="Futur lien">Lien interne 6</a> </li>
  </ul>
  <h4>Titre du menu 2</h4>
  <ul>
   <li><a href="http://www.lien_7.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" title="Futur lien extérieur">Lien vers l'extérieur 1</a> </li>
   <li><a href="http://www.lien_8.html" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" title="Futur lien extérieur">Lien vers l'extérieur 2</a> </li>
  </ul>
   <div id="courielle">
    <a href="mailto:shebert@leconcepteur.ca" title="Vous avez des questions ? Écrivez moi.">Courielle</a>
    <span id="logo"><img src="lc.png" alt="logo" /></span>
   </div>
 </div>
</div>

Copier ce qui suit dans le CSS.

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

/* Espace réserver au menu vertical*/
#side-nav {
font-size:.8em;
background-color:#036;
border:1px solid #000;
width:200px;
height:380px
}

#nav {
width:190px;
height:290px
}

#nav h4 {
color:#fff;
text-align:center
}

#nav ul {
padding-left:25px;
list-style-image:url(../images/icones/puce.png);
margin:0
}

#nav li {
line-height:20px;
background-color:#07c
}

#nav a {
color:#eee;
text-decoration:none;
border:1px solid #036;
display:block;
padding:0 10px
}

#nav a:hover {
background-color:#903;
border:1px solid #fff;
text-decoration:none
}

#courielle {
width:163px;
height:60px;
text-align:center;
background-color:#07c;
border:1px solid #fff;
margin:20px
}

#courielle a {
color:#000;
border:none
}

#courielle a:hover {
color:#fff;
border:none;
background-color:#07c
}

#logo img {
padding:5px 60px;
border:none
}

Changer les puces

Dans le CSS, c'est l'attribut list-style-image qui permet de modifier la puce par défaut des navigateurs pour la remplacer par un calque. Généralement un point noir fait office de puce, mais vous pouvez indiquer au navigateur ce que vous désirez. Par exemple :

• list-style:none (pas de puce).
• list-style-image:url(puce.gif) (une image comme puce).
• list-style-type:disc (un cercle tranparant).

Compatibilité des navigateurs

Si vous insérez un claque, il se peut que les vieux navigateurs ne le supporte pas. Pour une question de compatibilité, changer la ligne 22 par :

list-style: disc url(../images/icones/puce.gif);

Si le navigateur ne prend pas en charche le calque, il y aura un disque à la place.

LE CONCEPTEUR DE SITE WEB.com

Pour un site professionnel

 514 363-4169
 serge@leconcepteur.ca