Plusieurs volets sur une même page
Bonjour,
Je suis en train de développer un site en html et css.
Mon objectif est d'avoir plusieurs volets déroulants qui s'ouvrent en fonction des choix de l'utilisateur.
Voici l'état actuel de mon code php
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
| <div id="volet1" class="volet">
<h1>Titre</h1>
</div>
<br><br><br>
<div id="volet">
</form>
<form id="start" action="choice.php" method="post">
<h1>Titre</h1>
<label for="choix">Je veux </label>
<select name="utilise" id="utilise" >
<option value="Supprimer"> Supprimer</option>
<option value="Activer"> Activer</option>
<option value="Désactiver"> Désactiver</option>
<option value="Ajouter au compte Rézo"> Désactiver</option>
<option value="Mettre Ã* jour les macs"> Désactiver</option>
</select>
</p>
<p>
<label for="id">Id</label>
<input name="id" id="id" type="text" required />
</p>
<p>
<label for="mdp">mon mot de passe est</label>
<input name="mdp" required id="mdp" type="password" >
</p>
<p>
<input type="submit" href="#finish" > ou <input value="reset" type=reset href="#start">
</p>
</div>
<div id="finish">
<p>
<a href="../test.php"></a>
Inscription terminée!
</p>
</div>
</form> |
et le CSS du volet
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
| .volet {
width: 440px;
padding: 10px;
}
.volet a.ouvrir {
padding: 10px 25px;
background:#455164;
color: #fff;
text-decoration: none;
}
.volet {
position: relative;
left: -520px; top: 40px;
}
.volet a.ouvrir {
position: absolute;
right: -88px;
top: 150px;
/* quelques styles CSS3 */
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
border-radius: 0 0 8px 8px;
}
:required
{
background-color: red;
}
.volet {
-webkit-transition: all .5s ease-in;
transition: all .5s ease-in;
}
.volet:target {
left: 0;
}
.volet_clos:target .volet {
/* retourne Ã* ta place */
}
.volet a.ouvrir,
.volet a.fermer {
/* les styles donnés précédemment */
}
.volet a.fermer {
display: none;
}
.volet_clos:target .volet {
left: -270px;
}
.volet:target a.ouvrir {
display: none;
}
.volet:target a.fermer {
display: block;
} |
J'essaye avec
Code:
1
2
| <a href="#volet" class="ouvrir" aria-hidden="true">Agir sur un utilisateur</a>
<a href="#volet1" class="ouvrir" aria-hidden="true">Agirs sur tous les utlisateurs</a> |
d'ouvrir les deux volets indépendamment l'un de l'autre mais pour l'instant aucun succès, auriez-vous des pistes?
Merci d'avance
