Des panels avec des onglets
Bonjour,
Je viens de me faire un groupe de panels (des panneaux de menu) sélectionnables par onglets.
Le menu des panels fonctionne impeccable chez moi, il sert à faire apparaître un panneau DIV dans lequel vous aurez mis ce que vous voulez, et avec les onglets vous choisissez le panneau que vous voulez, il prend la place du précédent et l'onglet du panneau sélectionné reste actif.
Je n'ai pas cherché à le rendre compatible IE, et toutes mes contributions ne le seront jamais, à bas IE.
Donc comme j'aime partager mes bons trucs, je vous offre le code :
Dans le Body :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!-- Onglets des items -->
<span id="onglets">
<div class="onglet" id="A" onclick="affiche(this.id)">Sols</div>
<div class="onglet" id="B" onclick="affiche(this.id)">Batiments</div>
<div class="onglet" id="C" onclick="affiche(this.id)">Arbres</div>
<div class="onglet" id="D" onclick="affiche(this.id)">Plantes</div>
<div class="onglet" id="E" onclick="affiche(this.id)">Objets</div>
<div class="onglet" id="F" onclick="affiche(this.id)">Persos</div>
</span>
<!-- Panneaux des items -->
<div id="cadrepanels">
<div class="panel" id="Apanel">Sols</div>
<div class="panel" id="Bpanel">Batiments</div>
<div class="panel" id="Cpanel">Arbres</div>
<div class="panel" id="Dpanel">Plantes</div>
<div class="panel" id="Epanel">Objets</div>
<div class="panel" id="Fpanel">Persos</div>
</div> |
Dans le CSS :
Code:
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
| #onglets
{
padding:0px;
margin:0px;
position: relative;
float:left;
top:10px;
width:420px;
height:22px;
margin-left:5px;
border: 1px solid #9EA0A1;
background-color:blue;
font: bold 11px Arial;
list-style-type: none;
text-align:center;
z-index:0;
}
.onglet
{
position: relative;
float: left;
width:60px;
height: 18px;
left:0px;
top:-10px;
background-color:lime;
margin: 2px;
padding:2px;
border: 1px solid blue;
cursor:url('main.png'),auto;
}
#A
{
background-color:yellow;
}
.onglet:hover
{
background-color: yellow;
}
#cadrepanels
{
margin-top:0px;
float:left;
width:420px;
height:200px;
background-color:red;
margin-left:5px;
}
.panel
{
position: relative;
left:0px;
top:0px;
width:420px;
height:200px;
background-color:yellow;
display:none;
}
#Apanel
{
display:block;
} |
Dans le javascript :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| function affiche(id)
{
// Cache tous les panneaux du menu.
var choix=document.getElementsByClassName("panel");
for (i=0;i<choix.length;i++)
{
choix[i].style.display="none";
}
// Colore en vert clair tous les onglets du menu.
var choix=document.getElementsByClassName("onglet");
for (i=0;i<choix.length;i++)
{
choix[i].style.backgroundColor="lime";
}
// Colore en jaune le premier onglet du menu (=actif)
document.getElementById(id).style.backgroundColor='yellow';
// Rend visible le panneau du menu qui a été choisi.
document.getElementById(id+"panel").style.display="block";
} |
Pour le positionnement c'est chacun qui se le fera car ça dépend des DIV qui sont présent avant ce menu dans la page perso de chacun de nous.
Les couleurs que j'ai choisi c'est pour bien montrer les différences entre les options, vous mettrez vos propres couleurs.
Aperçu :
Voici un aperçu de ce que ça donne, on y voit que j'ai sélectionné le panel "plantes" :
[IMG]http://img171.imageshack.us/img171/3404/panels.png
