Menu à onglet

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

Menu à onglet.

Le menu à onglet est de plus en plus populaire chez les concepteurs. En plus d'être très attrayant, il accentue l'idée d'un dossier chez les visiteurs comme s'il était dans une filière. Il démontre que le dossier est important et qu'il mérite d'être conservé. En effet, il est rare que nous conservions des documents inutiles dans une filière..

Ce menu à onglet est très joli et ne comporte que trois calques. Dans les faits, si nous utiliserions "l'ancienne méthode" il faudrait sept calques pour arriver au même résultat et probablement un script pour que les calques soient téléchargés en même temps que la page et éviter un délai au survol de la souris.

Remarquez l'attribut background-position sur les lignes 25, 32, 58 et 62 dans le CSS qui, avec une valeur négative, fait "glisser" le calque de haut en bas pour changer la couleur des onglets. Il n'y a aucun script pour ce modèle, mais un petit CSS est nécessaire pour Internet Explorer 7 même si je crois que le "bugue" qui causait le problème d'affichage a été corriger.

La balise span permet d'afficher le côté gauche de l'onglet rendant les onglets ajustables au texte.

Les calques

Télécharger d’abord les calques ici

Résultat attendu :

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

<!-- Espace réserver au menu -->
<div id="onglet">
  <ul>
    <li id="actif"><span>Accueil</span> </li>
    <li><a href="lien.php"><span>Table des matières</span></a> </li>
    <li><a href="lien.php"><span>Outils</span></a> </li>
    <li><a href="lien.php"><span>Plan du site</span></a> </li>
  </ul>
</div>

Pour avoir l'onglet blanc sur la page en cour, il faut mettre l'identifiant "actif" sur l'élément li.

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

/* Espace réserver au menu */
#onglet {
overflow:hidden;
background:#000 url(../images/menu/fond.png) repeat-x
}

#onglet ul {
float:right;
list-style:none;
margin:16px 16px 0 0;
padding:0
}

#onglet ul li {
float:left;
margin-left:3px
}

#onglet ul li a {
float:left;
text-decoration:none;
letter-spacing:1px;
padding-left:10px;
background-image:url(../images/menu/coin_gauche.png);
background-position:0 -30px;
background-repeat:no-repeat
}

#onglet ul li a span {
float:left;
background-image:url(../images/menu/coin_droit.png);
background-position:100% -30px;
background-repeat:no-repeat;
color:#fff;
padding:6px 10px 3px 0
}

#onglet ul li#actif {
float:left;
text-decoration:none;
letter-spacing:1px;
padding-left:10px;
background-image:url(../images/menu/coin_gauche.png);
background-position:0 0;
background-repeat:no-repeat
}

#onglet ul li#actif span {
float:left;
background-image:url(../images/menu/coin_droit.png);
background-position:100% 0;
background-repeat:no-repeat;
color:#333;
padding:6px 10px 3px 0
}

#onglet ul li a:hover,#en-tete ul li a:focus {
background-position:0 -60px
}

#onglet ul li a:hover span,#en-tete ul li a:focus span {
background-position:100% -60px
}

La pseudo-classe dynamique focus

Remarquez la propriété CSS focus sur les lignes 57 et 61. Cette propriété permet la navigation par clavier. En effet, il arrive pour toutes sortes de raisons, qu'une personne utilise la touche "Tab" du clavier pour choisir un bouton puis "Enter" pour sélectionner le lien et se rendre sur la nouvelle page. Comme le menu à onglet ait le plus souvent dans le haut des pages, c'est une bonne idée de permettre cette action.

Pour que focus soit implanté, il faut simplement lui attribuer les mêmes valeurs que hover. La version optimiser est privilégié dans le CSS à copier et sur le modèle à télécharger.

Internet Explorer 8 affiche un pointillé autour du calque ce qui est excellent, mais Firefox affiche un cadre bleu qui est presque imperceptible sur un fond foncé comme c'est le cas de l'arrière-plan du menu. Selon la couleur que vous aurez choisie ou si vous ne voulez pas de cet arrière-plan, il n'y a probablement pas trop de problèmes dans la mesure où l'arrière-plan est clair, mais s'il est foncé, je vous suggère d'insérer ses quelques lignes dans le CSS à partir de la ligne 56.

#onglet a:focus{
outline:#aaa dotted 1px
}

Il y aura un cadre pointiller gris autour des ongles au lieu du cadre bleu.

Un petit CSS pour Internet Explorer 7.

Entre <head> et </head> insérer la ligne suivante.

1

<!--[if gte IE 7]><style type="text/css" media="screen">@import url(style/ie-onglet.css);</style><![endif]-->

Attention : Je présume que votre feuille CSS est dans le dossier "style" comme le modèle à télécharger, mais si vous avez un autre nom de dossier, modifier le chemin.

Copier ce qui suit dans un nouveau document Notepad++ puis Enregistrer et donner-lui le nom ie-onglet.css. Vous avez maintenant deux feuilles CSS mais celle-ci ne sera lue que par Internet Explorer 7. Pour plus d'information, lisez ce qui suit au sujet d'Explorer.

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

a:hover {
cursor: pointer;
}

#en-tete ul li a:active {
background-position: 0% -60px;
}

#en-tete ul li a:active span {
background-position: 100% -60px;
}

Menu à onglet avec un calque

Il y a plusieurs façons d'insérer les calques en utilisant simplement le CSS et qui fonctionne très bien pour les menus à onglet. Ce menu n'utilise qu'un seul calque mais insère le côté gauche et le côté droit très simplement. La seule différence avec le menu précédent est que les onglets ne s'affichent que sur le lien actif et sur les liens survolé.

Le calque

Télécharger d’abord le calque ici

Résultat attendu :

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

1
2
3
4
5
6
7
8

<ul class="menu">
 <li><a href="#nogo"><span>Accueil</span></a></li>
 <li><a href="#nogo"><span>Table des matières</span></a></li>
 <li><a href="#nogo"><span>Services</span></a></li>
 <li><a href="#nogo"><span>Livre d'or</span></a></li>
 <li><a href="#nogo"><span>Contacter nous</span></a></li>
 <li><a href="#nogo"><span>Plan du site</span></a></li>
</ul>

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
47
48
49
50
51
52

.menu {
line-height:27px;
list-style:none;
width:100%;
height:27px;
border-bottom:#a7a7a7 solid 5px;
background-color:#fff;
margin:10px 0 0 0
}

.menu li {
float:left;
margin-left:10px
}

.menu li a {
color:#aaa;
font-size:.8em;
font-family:arial, verdana, sans-serif;
text-align:center;
text-decoration:none;
line-height:27px;
height:27px;
display:block;
float:left;
padding:0 0 0 7px;
cursor:pointer
}

.menu li a span {
float:left;
display:block;
padding:0 14px 0 7px
}

.menu li.actif a {
color:#fff;
background:url(../images/onglet.png);
}

.menu li.actif a span {
background:url(../images/onglet.png) no-repeat right top;
}

.menu li a:hover {
color:#fff;
background:url(../images/onglet.png);
}

.menu li a:hover span {
background:url(../images/onglet.png) no-repeat right top;
}

Comme pour le menu précédent, nous utilisons la balise span pour insérer l'onglet à droit du lien. Cela évite d'avoir des onglets de largeur fixe.

Examiner attentivement les lignes 38 et 47. Remarquez qu'elles ont exactement les mêmes propriétés. Le calque est simplement en arrière-plan de gauche à droite. Pour que le coin arrondi soit aussi affiché à droite, remarquez que sur les lignes 42 et 51, nous utilisons l'élément span avec la propriété right ainsi le calque s'affiche de droite à gauche. Les coins arrondis sont donc sur les deux côtés pour former un onglet parfait.

LE CONCEPTEUR DE SITE WEB.com

Pour un site professionnel

 514 363-4169
 serge@leconcepteur.ca