Volet options masquables

**scrouet** · 27/10/2014, 18h03

Bonjour.

Je souhaite créer un volet d'options masquable.
Voici mon code :

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
<form id="frmRecherche" action="recherche.php" method="post">
	<div class="bloc_form">
		<label for="Mot">Mot :</label>
		<input type="text" id="Mot" name="Mot" title="Mot à rechercher" size="10" maxlength="20" pattern=".{3,}" value="">
		<a href="#blc_sensibilite" onclick="commuter_sensibilite();return false" id="commut_sensibilite"><img src="Images/engrenage.png" title="Options" alt="options"></a>
		<div id="blc_sensibilite">
			<label>Sensibilit&eacute; :</label><ul>
				<li>
					<input type="checkbox" id="SensibCasse" name="SensibCasse">
					<label for="SensibCasse" title="Sensibilité à la casse">casse</label>
				</li>
				<li>
					<input type="checkbox" id="SensibCarSpec" name="SensibCarSpec">
					<label for="SensibCarSpec" title="Sensibilité aux accents et caractères spéciaux">accents</label>
				</li>
			</ul>
		</div>
	</div>
	<div class="bloc_form">
		<label for="Lan" title="Langue">Langue :</label>
		<select id="Lan" name="Lan">
			<option value="">&nbsp;</option>
			<option value="GB">anglais</option>
			<option value="FR">fran&ccedil;ais</option>
		</select>
	</div>
	<button type="submit" id="btnRrechercher" name="btnRechercher">Rechercher</button>
</form>

Le volet d'options en question est le DIV blc_sensibilite. Pour faire du responsive design j'aimerais qu'il s'affiche à droite du champ Mot si l'écran est assez large et en dessous dans le cas contraire. Mais pour qu'il ne prenne pas trop de place dans ce second cas, je souhaiterais qu'il soit (dé)masquable à volonté avec un effet de transition (plus joli qu'une simple apparition/disparition avec display="none"). Pour masquer/démasquer ce volet, l'utilisateur cliquerait simplement sur le lien commut_sensibilite.

Pour l'instant mon code CSS ressemble à ça :

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
#recherche form {text-align:center}
#recherche .bloc_form {
	padding:.3rem;
	text-align:left;
	width:100%}
#recherche input {line-height:1.3rem}
#recherche #blc_sensibilite {
	display:block;
	margin-left:1rem}
#recherche #blc_sensibilite ul {
	list-style:none;
	margin:0}
#recherche #blc_sensibilite ul li {
	margin-left:.3rem}
#recherche #commut_sensibilite img {width:1.5rem}
/*#recherche #commut_sensibilite {display:none}*/
#recherche #blc_sensibilite {
	-webkit-transition: height .5s linear;
	-moz-transition: height .5s linear;
	-ms-transition: height .5s linear;
	-o-transition: height .5s linear;
	transition: height .5s linear;
	overflow:hidden}
@media screen and (max-width:600px) {
	#recherche #blc_sensibilite {
		height:4rem;
		margin-top:.5rem;
	}
}
@media screen and (min-width:600px) {
	#recherche #blc_sensibilite {display:inline-block}
	#recherche #blc_sensibilite {margin-left:2rem;position:relative;top:.3rem}
	#recherche #blc_sensibilite ul {display:inline}
	#recherche #blc_sensibilite ul li {display:inline}
}
#btnRrechercher {margin-top:1rem}

Mais ça ne fonctionne pas comme je le souhaiterais.
Auriez-vous une idée ?

**NoSmoking** · 29/10/2014, 12h50

Bonjour,

Pour l'instant mon code CSS ressemble à ça :

Code :

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

...

Mais ça ne fonctionne pas comme je le souhaiterais.
Auriez-vous une idée ?

j'ai malheureusement une mauvaise nouvelle pour toi, il va te falloir apprendre les bases, il est où l'élément ayant pour ID recherche ?.

**scrouet** · 29/10/2014, 13h44

Effectivement, il n'apparait pas dans le code CSS. Il s'agit de l'élément <body>. Cela me permet de faire des ajustements sur les éléments form, .bloc_form et input applicables uniquement sur une page. J'aurais aussi pu utiliser plus directement #frmRecherche... mais à mon sens ça ne change pas grand chose pour ce que je souhaite faire.

**rodolphebrd** · 29/10/2014, 15h18

Salut,

je m'étais fait la même remarque que NoSmoking et j'avais changé l'ID pour tester mais je ne vois pas où tu veux en venir.

Envoyé par scrouet

Mais pour qu'il ne prenne pas trop de place dans ce second cas, je souhaiterais qu'il soit (dé)masquable à volonté avec un effet de transition (plus joli qu'une simple apparition/disparition avec display="none"). Pour masquer/démasquer ce volet, l'utilisateur cliquerait simplement sur le lien commut_sensibilite.

Tu veux 2 choses c'est bien ça ?
Le resize et le bouton pour faire apparaitre l'élément ?

Poste ton exemple à partir de Codepen.

**Bovino** · 29/10/2014, 15h35

Un truc comme ça ?

http://jsfiddle.net/rvzhLusv/

**scrouet** · 29/10/2014, 16h40

Oui, c'est bien le type d'effet que je recherche et que j'arrive à reproduire pour un volet d'options au milieu de page plutôt que sur un côté. Là où ça se complique c'est que j'aimerais un comportement différent selon la taille d'affichage disponible :

En mode réduit (ex : affichage sur smartphone) le volet s'ouvrirait verticalement sous le champ Mot.
En mode élargie (ex : affichage sur desktop) le volet ne serait pas masqué ou s'ouvrirait horizontalement sur la droite du champ Mot.

J'arrive bien à positionner mon volet et à le mettre en forme avec CSS. C'est le masquage/démasquage avec JS qui coince. Je n'arrive pas à déterminer le mode d'affichage dans lequel je suis : la propriété display de l'objet blc_sensibilite est vide pour JS au chargement de la page. Je me dit qu'il pourrait y avoir une solution en récupérant la largeur de la fenêtre, mais je crains des effets de bord (incohérence entre JS et CSS) lorsque j'approche de la valeur de bascule.

**NoSmoking** · 30/10/2014, 22h43

C'est le masquage/démasquage avec JS qui coince.

La méthode utilisé par Bovino est on ne peu plus simple d'usage.

**scrouet** · 01/11/2014, 13h04

Bonjour.

La solution de Bovino est effectivement la bonne. Il m'a juste fallu un peu de temps pour en comprendre toute la portée et l'adapter à mon cas.

Du coup mon code CSS est devenu :

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
#frmRecherche {text-align:center}
#frmRecherche .bloc_form {
	padding:.3rem;
	text-align:left;
	width:100%}
#frmRecherche input {line-height:1.3rem}
#frmRecherche #blc_sensibilite {
	display:block;
	margin-left:1rem;
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-ms-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;
	overflow:hidden}
#frmRecherche #blc_sensibilite.masque {
	height:0;
	width:0}
#frmRecherche #blc_sensibilite ul {
	list-style:none;
	margin:0}
#frmRecherche #blc_sensibilite ul li {
	margin-left:.3rem}
#frmRecherche #commut_sensibilite {display:none}	/* Masqué par défaut ; activé par JS */
#frmRecherche #commut_sensibilite img {width:1.5rem}
@media screen and (max-width:600px) {
	#frmRecherche #blc_sensibilite {
		height:4rem;
		margin-top:.5rem;
		width:7rem}
}
@media screen and (min-width:600px) {
	#frmRecherche #blc_sensibilite {
		display:inline-block;
		height:1.1rem;
		margin-left:2rem;
		position:relative;
		top:.3rem;
		width:19rem}
	#frmRecherche #blc_sensibilite ul {display:inline}
	#frmRecherche #blc_sensibilite ul li {display:inline}
}

La fonction de commutation reprend le principe du classList.toggle et j'ai ajouté en fin de page un bout de javascript :

Code :

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

1
2
document.getElementById("blc_sensibilite").classList.add("masque");
document.getElementById("commut_sensibilite").style.display="inline";

**NoSmoking** · 01/11/2014, 18h10

...j'ai ajouté en fin de page un bout de javascript

pourquoi ne pas affecter la classe directement dans le code HTML et utiliser classList.toogle(' masque') ?

**scrouet** · 01/11/2014, 18h52

C'est à dire ?
Là je n'ajoute la classe "masque" via JS qu'à la fin de la page pour que le bloc d'options reste visible si JS est désactivé.

**NoSmoking** · 06/11/2014, 18h33

Tu as raison d'y penser, c'est une bonne chose pour 1.5% (à mes dernières nouvelles) des internautes qui naviguent javascript désactivé sans compter les internautes (4% à ce jour je crois savoir) qui naviguent encore avec IE8 qui lui ne reconnait pas classList.

Volet options masquables

CSS

Discussions similaires

Partager

Partager