[Résolu] Checkbox sur deux tag ou class

Question

nantais

3 Oct 2018 à 18:38

bonjour
voici je que j'ai fait pour l'intant

.flex{display:flex;padding:1em 0}.content{width:85%}
.horizontal{padding:4em 0 2em 15%}.vertical{position:relative;width:15%}
.vertical a{display:block;margin:.7em 0}
.vertical div{position:absolute;overflow-x:hidden;top:4em;right:0;bottom:1.5em;left:1.5em}
.content{width:100%}
nav,.vertical{display:none}
label{width:5em;height:5em;cursor: pointer}
.content{margin-top:1em}
.label:before {
  content:"";
  position: absolute;
  top: 1em;
  left: 1em;
  width: 2em;
  height: 0.25em;
  border-top: 0.78em double #000;
  border-bottom: 0.25em solid #000;
}
.horizontal{padding:0 0 0 3em}
input[type=checkbox]:checked + nav{
   display:inline-block
}
input{display:none}

<label class="label" for="toggle"></label>
<input type="checkbox" id="toggle">
<nav class="horizontal">
<a href="">Index</a>
<a href="">a</a>
<a href="">b</a>
<a href="">c</a></nav>
<div class="flex">
<nav class="vertical"><div>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a></div></nav>
<div class="content"></div>

je voudrais qu'en cliquant sur les 3 bars cela mette en display:inline-block à la fois e menu horizntal et le menu vertical, y a t'il moyen d'utiliser checkbox:checked pour une action sur deux tags
pour l'instant je n'arrive avec mon systeme qu'a derouler l'un u bien l'autre ds menus mais pas les deux
avec du javascript je seche aussi

merci
Modifié par nantais (03 Oct 2018 - 18:39)

bazooka07

3 Oct 2018 à 19:04

Ne t'arrêtes pas au premier <nav> venu :

input[type=checkbox]:checked + nav,
input[type=checkbox]:checked + nav + div + nav {
   display:inline-block
}

Je n'ai pas testé mais peut-être que cela marche :

input[type=checkbox]:checked ~ nav {
   display:inline-block
}

Mais ton code HTML est bancal ( pas de </nav>, ... )
Modifié par bazooka07 (03 Oct 2018 - 19:07)

nantais

3 Oct 2018 à 19:47

merci bazooka mais ca ne donne rien
tu es sur qu'on peut viser deux tags
sinon il y a un </nav> meme deux

bazooka07

3 Oct 2018 à 23:30

Si tu indentais ton code, cela nous permettrait d'y voir plus clair et de gagner du temps :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>sans titre</title>
	<style>
		body { margin:0; padding: 0; }
		.header { position: fixed; top: 0; left: 0; right: 0; } /* pour .vertical */

		/* --- navigation --- */
		.header input[type="checkbox"] { display:none; }
		.header nav { display: none; }
		.header label {
			position: absolute;
			width: 3em;
			padding: 0.3rem 0;
			border: 1px solid transparent;
			cursor: pointer;
			background: moccasin;
			text-align: center;
		}
		.header input[type="checkbox"]:checked + label + nav,
		.header input[type="checkbox"]:checked + label + nav + nav { display:  block; }
		.horizontal { margin-left: 3rem; padding: 0 0.5rem; background: #fef; }
		.horizontal a { display: inline-block; margin: 0 1rem; padding: 0.3rem; border: 1px solid #444; }
		.vertical { position: absolute; width: 10rem; top: 2rem; background: #ffe; }
		.vertical a { display: block; margin: 0.3rem 0; border: 1px solid #444; }

		.content { margin: 0; padding: 2.5rem 1rem 1rem 11rem; background: #fee; }
	</style>
</head><body>
	<div class="header">
		<input type="checkbox" id="toggle">
		<label class="label" for="toggle">&#9776;</label>
		<nav class="horizontal">
		    <a href="">Index</a>
		    <a href="">a</a>
		    <a href="">b</a>
		    <a href="">c</a>
		</nav>
	    <nav class="vertical">
            <a href="">1</a>
            <a href="">2</a>
            <a href="">3</a>
	    </nav>
	</div>
	<div class="content">
		Content
	</div>
</body></html>

Modifié par bazooka07 (03 Oct 2018 - 23:32)

nantais

4 Oct 2018 à 08:21

merci bazooka
avec ton exemple je commence à comprendre comment ca fonctionne
reste que j'ai un flex entre les deux nav, je cherche comment faire avec

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">

</head>
<style>
.flex{display:flex;padding:1em 0}.content{width:85%}
.horizontal{padding:4em 0 2em 15%}.vertical{position:relative;width:15%}
.vertical a{display:block;margin:.7em 0}
.vertical div{position:absolute;overflow-x:hidden;top:4em;right:0;bottom:1.5em;left:1.5em}
.content{width:100%}
nav,.vertical{display:none}
label{width:5em;height:5em;cursor: pointer}
.content{margin-top:1em}
.label:before {
  content:"";
  position: absolute;
  top: 1em;
  left: 1em;
  width: 2em;
  height: 0.25em;
  border-top: 0.78em double #000;
  border-bottom: 0.25em solid #000;
}
.horizontal{padding:0 0 0 3em}
input[type=checkbox]:checked + nav{
   display:inline-block
}
input{display:none}
</style>
<body>
<label class="label" for="toggle"></label>
<input type="checkbox" id="toggle">
<nav class="horizontal">
<a href="">Index</a>
<a href="">a</a>
<a href="">b</a>
<a href="">c</a></nav>
<div class="flex">
<nav class="vertical"><div>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a></div></nav>
<div class="content"></div></div>
</body>
</html>

bazooka07

4 Oct 2018 à 08:48

Lire le manuel ( Read the fucking manual (RTFM) )
https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS
https://fr.wikibooks.org/wiki/Le_langage_CSS/Les_s%C3%A9lecteurs
Modifié par bazooka07 (04 Oct 2018 - 08:57)

nantais

4 Oct 2018 à 09:15

j'ai reussis bazooka merci pour ton aide, cela m'a permis de comprendre comment appeler les elements en css

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">

</head>
<style>
.flex{display:flex;padding:1em 0}.content{width:85%}
.horizontal{padding:4em 0 2em 15%}.vertical{position:relative;width:15%}
.vertical a{display:block;margin:.7em 0}
.vertical div{position:absolute;overflow-x:hidden;top:4em;right:0;bottom:1.5em;left:1.5em}
.content{width:100%}
.horizontal,.vertical{display:none}
label{width:5em;height:5em;cursor: pointer}
.content{margin-top:1em}
.label:before {
  content:"";
  position: absolute;
  top: 1em;
  left: 1em;
  width: 2em;
  height: 0.25em;
  border-top: 0.78em double #000;
  border-bottom: 0.25em solid #000;
}
.horizontal{padding:0 0 0 3em}
input[type="checkbox"]:checked + nav ,
		input[type="checkbox"]:checked + nav + div>nav>div  { display:  block; }


input{display:none}
</style>
<body>
<label class="label" for="toggle"></label>
<input type="checkbox" id="toggle">
<nav class="horizontal">
<a href="">Index</a>
<a href="">a</a>
<a href="">b</a>
<a href="">c</a></nav>
<div class="flex" id="flex">
<nav><div class="vertical">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a></div></nav>
<div class="content"></div></div>
</body>
</html>

nantais

4 Oct 2018 à 09:16

un grand merci

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Checkbox sur deux tag ou class