Bonjour tout le monde,
Débutant dans la mise en page HTML5 et CSS, des nombreux problèmes se sont posés lorsque j'ai voulu mettre en œuvre mes compétences.
Je souhaite intégrer dans ma page un menu déroulant (faux aspect dynamique) seulement sous la base du CSS3. Ce menu présente les caractéristiques suivantes :
- Premier niveau sélectionnable (la checkbox reste une bonne solution)
- Second niveau qui apparait une fois le premier niveau sélectionné
- lors du survol du premier niveau, sa couleur change (hover)
voici un extrait de mon html :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 <div id="LesObjets"> <h3>Objets</h3> <div id="mainmenunav"> <div class="objetselect" id="Obj1categorie"><input type="checkbox" name="objet1" id="objet1" /> Objet 1 <label for="objet1"></label><br /> <ul> <li class="critin"> Critere 1<br /></li> <li class="critin"> Critere 2<br /></li> <li class="critin"> Critere 3<br /></li> <li class="critin"> Critere 4</li> </ul> </div> <div class="objetselect" id="Obj2categorie"><input type="checkbox" name="objet2" id="objet2" /> Objet 2 <label for="objet2"></label><br /> <ul> <li class="critin">Critere 1<br /></li> <li class="critin">Critere 2<br /></li> <li class="critin">Critere 3<br /></li> <li class="critin">Critere 4</li> </ul> </div> <div class="objetselect" id="Obj3categorie"><input type="checkbox" name="objet3" id="objet3" /> Objet 3 <label for="objet3"></label><br /> <ul> <li class="critin">Critere 1<br /></li> <li class="critin">Critere 2</li> </ul> </div> <div class="objetselect" id="Obj4categorie"><input type="checkbox" name="objet4" id="objet4" /> Objet 4 <label for="objet4"></label> <ul> <li class="critin">Critere 1<br /></li> <li class="critin">Critere 2<br /></li> <li class="critin">Critere 3<br /></li> <li class="critin">Critere 4</li> </ul> </div> </div>
et voici le CSS que je lui ai associé :
En fait, j'ai en parti réalisé ce que je veux, l'objet 4 est fonctionnel sur ma page (menu qui se déplie et se ferme); Cependant les autres ne veulent rien savoir.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105 #LesObjets{ font-family: Arial; font-size: 14px; width: 600px; margin: 0 auto; } #LesObjets .objetselect{ color: #FFF; background: #045779; padding: 8px; padding-left: 10px; cursor: pointer; position: relative; } #LesObjets ul { height: auto; display: none; border:1px solid black; } #mainmenunav .critin{ color: #D2D7D8; background: #00789a; padding: 10px; padding-left: 20px; border-bottom: 1px solid #035c7e; } #mainmenunav:hover { color: #FFF; background: #108BAD; } #mainmenunav.critin:last-child { border-bottom: none; } /*label*/ #mainmenunav [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label { padding-left: 200px; padding-bottom: 36px; left: 0; top: 0; cursor: pointer; position: absolute; } /*aspect general*/ #mainmenunav [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { /*content: '\25bc';*/ position: absolute; top: 10px; right: 10px; font-size: 14px; color: #002E41; transition: all .2s; } /*aspect si non selectionné*/ #mainmenunav [type="checkbox"]:not(:checked) + label:after { opacity: 0; /* coche invisible */ transform: scale(0); /* mise à l'échelle 0 */ -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); } /*aspect si selectionné*/ #mainmenunav [type="checkbox"]:checked + label:after { opacity: 1; /* coche opaque */ transform: scale(1); /* mise à l'échelle 1:1 */ -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); } #mainmenunav label:before { opacity: 0; } #mainmenunav label:hover:before { content: '\25bc'; position: relative; top: 10px; left: 360px; font-size: 16px; color: #002E41; transition: all .2s; opacity: 1; /* coche opaque */ } #Obj1categorie, #Obj2categorie, #Obj3categorie, #Obj4categorie{ position: relative; } #Obj1categorie [type="checkbox"]:checked + label + ul{ display: block; } #Obj2categorie[type="checkbox"]:checked + label + ul{ display: block; } #Obj3categorie [type="checkbox"]:checked + label + ul{ display: block; } #Obj4categorie [type="checkbox"]:checked + label + ul{ display: block; } .critin { transition: all .2s ease-out; -webkit-transition : all .2s ease-out; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; -ms-transition: all .2s ease-out;*/ }
S'il vous plait, pourriez-vous m'aider ?
Partager