Menu déroulant uniquement en CSS

**Spontex78** · 17/10/2014, 10h39

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é :

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;*/
}

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.

S'il vous plait, pourriez-vous m'aider ?

**JefReb** · 19/10/2014, 09h30

Pour ma part j'ai résolu ce genre de menu à l'aide de PHP.

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
35
36
37
38
39
40
41
42
43
44
45
46
<?php function setMenuActif($id) 
{
  echo '<style type="text/css">ul#vermenu ul  { display:none; }</style>';
  if ($id != 0) { echo '<style type="text/css">ul#vermenu ul#m'.$id.' { display:block; }</style>'; } 
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">
ul#vermenu                              { width:170px; }
ul#vermenu,
ul#vermenu ul                   { margin:0; padding:0; list-style:none;  }
ul#vermenu ul                   { display:none; margin-left:3%;}
ul#vermenu a            { display:block; vertical-align:middle; text-align:left; text-decoration:none; 
                                                  margin:0; padding:5px; background-color:blue; color:white; }                          
ul#vermenu ul a                 { background-color:orange;}
ul#vermenu li           { position:relative; margin:5px 1px; }
ul#vermenu li:hover>a   { background:#0CF; text-decoration:underline; }
 
</style>
</head>
 
<body>
<?php
setMenuActif(0);
?>
<nav>
    <ul id="vermenu">
        <li><a href="menu-garagea.php">menua</a></li>
            <ul id="m1">
                <li><a href="#">sous-menua1</a></li>
                <li><a href="#">sous-menua2</a></li>
            </ul>
        <li><a href="menu-garageb.php">menub</a></li>
             <ul id="m2">
                <li><a href="#">sous-menub1</a></li>
                <li><a href="#">sous-menub2</a></li>
            </ul>
        <li><a href="menu-garagec.php">menuc</a></li>
    </ul>
</nav>
</body>
</html>

Si on veut faire apparaître le premier sous menu, il suffit d'appeler la fonction SetMenuActif avec le paramètre 1.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<?php
setMenuActif(1);
?>

C'est une solution et il y en a certainement plein d'autres.

**NoSmoking** · 19/10/2014, 18h24

Bonjour,
il te faut faire attention à plusieurs petite chose
Dans le code suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#Obj2categorie[type="checkbox"]:checked + label + ul{
	display: block;
}

il manque un espace entre l'ID et le sélecteur #Obj2categorie [type="checkbox"], sinon la chaine entière est prise pour une ID.

Lorsque plusieurs éléments réagissent de la même façon, ce qui est ton cas, autant ce passer des ID et passer par une class.

Observe bien la structure de tes différents éléments du menu et tu constateras que seul le dernier ne possède pas de <br> avant la liste et c'est pour cela qu'il marche. Le sélecteur d'adjacence + (plus) s'arrête au BR, il te faudrait donc écrire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#Obj1categorie [type="checkbox"]:checked +label + br +ul{
}

Tu tirerais avantage à utiliser le sélecteur d'adjacence "élargie" ~ (tilde) qui lui passera le BR pour atteindre la UL.

Tu trouveras un exemple de mise en oeuvre dans Galerie au clic sans JavaScript

**Spontex78** · 20/10/2014, 09h44

Merci à vous deux,

en effet j'ai pu constater mes erreurs, j'essaye d'arranger mon code ce matin et je vous tiens au courant.

**Spontex78** · 20/10/2014, 09h47

C'est bon tout marche ==> résolu !

Menu déroulant uniquement en CSS [CSS 3]

CSS

Discussions similaires

Partager

Partager