Sujet Précédent Sujet Suivant

Ce ne sont quasiment pas des menus déroulant !

Résolu/Fermé
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 - 4 mars 2015 à 14:36
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 4 mars 2015 à 16:07
Bonjour,

Travaillant sur mon site, j'essaie au plus de ne pas mettre de java dans mon site. Seulement je tombe sur des petits cas a part :(
Alors ! Ma demande serai de faire comme des menu déroulant - au click - où cela déroule ou ouvre un contenu.
Comme sur cet article quand on clique sur "informations" tout en bas.
beta.chibi-nekotaku.fr/anime-manga-drama/btooom/

seulement pour cet article, je fais une checkbox et il faut que je la répète pour CHAQUES nouvelles div que je veux rajouter.
Par exemple si je veux ajouter pour les personnages, je vais devoir rajouter des lignes css pour la div...

Voici le code en clair que j'ai actuellement : 

<input type="checkbox" name="informations" id="info">
	<div class="defil_1">
		<label class="expand" for="info">Informations</label>
	</div>
	<div class="panel_content fond_1" id="informations">
		contenu caché qui s'affiche si on clique sur Informations
	</div>



#content #article input {
	display: none;
}

.expand {
	display: inline-block;
	cursor: pointer;
}	


.fond_1 {
	background: #333;
}

.defil_1
{
	font: bold 9pt "Trebuchet MS",Verdana,Helvetica;
	text-align: center;
	display: block;
	color: #FFF;
	background: url(img/back.png) repeat scroll center top;
	padding: 7px 10px;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	text-shadow: 1px 1px 1px #000;
}

.expand:hover {
	color: #FF0000;
}

.panel_content {
	font-family: "Trebuchet MS",Arial;
	color: #e7e7e7;
	border-bottom: 2px solid #000;
	padding: 0;
	height: 0;
	overflow: hidden;
	-moz-transition: height 0.2s;
	-webkit-transition: height 0.2s;
	-o-transition: height 0.2s;
	-ms-transition: height 0.2s;
	transition: height 0.2s;
	text-shadow: 1px 1px 1px #000;
}


Et là la ligne que je dois répéter a chaque fois en changeant les codes pour chaque nouvelles parties 
#info:checked ~ #informations { overflow: auto; height: auto; padding: 10px; border: 2px solid black;}


Et j'aimerai au futur que je puisses ne pas a avoir a modifier mon css juste pour ajouter une partie.

Est ce que c'est possible en css ? Ou faut il vraiment utiliser du javascript avec ce fameux "onclick" ?

Merci de votre réponse !

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié par jordane45 le 4/03/2015 à 15:25
Bonjour,

Tu peux essayer ceci : 
<html>
<head><title>TEST1</title>
<style>

#content #article input {
 display: none;
}

.expand {
 display: inline-block;
 cursor: pointer;
} 


.fond_1 {
 background: #333;
}

.defil_1
{
 font: bold 9pt "Trebuchet MS",Verdana,Helvetica;
 text-align: center;
 display: block;
 color: #FFF;
 background: url(img/back.png) repeat scroll center top;
 padding: 7px 10px;
 border-top: 2px solid #000;
 border-bottom: 2px solid #000;
 text-shadow: 1px 1px 1px #000;
}

.expand:hover {
 color: #FF0000;
}

.panel_content {
 font-family: "Trebuchet MS",Arial;
 color: #e7e7e7;
 border-bottom: 2px solid #000;
 padding: 0;
 height: 0;
 overflow: hidden;
 -moz-transition: height 0.2s;
 -webkit-transition: height 0.2s;
 -o-transition: height 0.2s;
 -ms-transition: height 0.2s;
 transition: height 0.2s;
 text-shadow: 1px 1px 1px #000;
}


.chkb:checked ~ .panel_content{ overflow: auto; height: auto; padding: 10px; border: 2px solid black;}







</style>
</head>
<body>
<div id="content">
<div> <!-- Chaque groupe d'input/ info doit être dans une DIV -->
<input type="checkbox" name="informations" id="info" class="chkb">
 <div class="defil_1">
  <label class="expand" for="info">Informations</label>
 </div>
 <div class="panel_content fond_1" id="informations">
  contenu caché qui s'affiche si on clique sur Informations
 </div>
</div>  
<div> <!-- Chaque groupe d'input/ info doit être dans une DIV -->
 <input type="checkbox" name="informations" id="info2" class="chkb">
 <div class="defil_1">
  <label class="expand" for="info2">Informations</label>
 </div>
 <div class="panel_content fond_1" id="informations2">
  contenu caché qui s'affiche si on clique sur Informations2
 </div>
 </div> 
  </div>
</body>
</html>


Cordialement,
Jordane
0
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
Modifié par Shuta le 4/03/2015 à 15:44
Mais bien sur !!! Rajouter une class dans la div et l'input et l'integrer au checkbox ! Pourquoi je n'y ai pas pensé plus tot :'(

Merci beaucoup ! Tu me sauve !!! <3
Ca m'épargne beaucoup de ligne en trop '^'
Donc je rajoute input dans une div ? Pourquoi faire en fait ?
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021
4 mars 2015 à 15:57
Tu rajoutes l'input + la div masquee contenant le text dans une DIV car le "~" prend tous les éléments déscendants ... donc si tu ne les isoles pas... en cliquant sur la première checkbox... tous les div contenant du text se trouvant en dessous s'afficheront.

PS:
Si la question est résolue..
Merci de ne pas oublier de clôturer le sujet
(en cliquant sur le lien "Marquer comme résolu" qui se trouve sous le titre de la question)

Cordialement,
Jordane
0
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
4 mars 2015 à 16:05
J'ai eu l'occasion de subir cette multiple ouverture xD a cause de ces div en effet !

merci beaucoup tu me sauve la vie :3
Maintenant le sujet est bien résolu :3
Bonne journée
0
Réponse 2 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
4 mars 2015 à 16:02
Salut
déjà il ne faut pas utiliser des checkbox pour faire un menu déroulant mais des listes (ul li)

pour un déroulenement au clic oui il faut du javascript ou jquery
ce qui deroule est caché par css (display none) et au clic une class est ajoutée par js ou mieux avec jquery on "deroule" avec la fonction slideDown()
un exemple en jquery

http://jsfiddle.net/eyezzgmy/1/

0
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
4 mars 2015 à 16:07
animostab, je ne veux justement pas faire de menu déroulant xD
Ca y ressemblerai mais ca n'en est pas, si tu regardes sur le lien que j'ai laissé, en bas il y a des cases a cliquer pour ouvrir une div simplement.
Et je ne voulais pas mettre je javascript car ca rend le site trop lourd après déjà que j'en aurait surement besoin pour faire une liste de rendu avec toutes les fiches (article) que j'ai écris et permettre de faire un tri.
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
4 mars 2015 à 16:07
déjà il ne faut pas utiliser des checkbox pour faire un menu déroulant mais des listes (ul li)

Non... tu peux utiliser ce que tu veux....
Où est-ce dit que tu ne dois utiliser "QUE" des ul li ??

pour un déroulenement au clic oui il faut du javascript ou jquery

Non... la preuve.. je l'ai fait sans .....

Maintenant... oui.. moi aussi je préfère utiliser le Jquery pour gérer cela.(et les listes...)... mais la demande de l'utilisateur c'était :
SANS java ( comprendre...javascript ).
Au clic ( donc pas d'utilisation du Hover...)
0

Discussions similaires

Absorbeur d'encre quasi plein
Nathalex8 -
ybidum -

12 réponses
Tampons d'encre en fin de vie
koubilai -
allpages -

24 réponses
absorbeur d'encre plein
crock3140 -
Aline -

19 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses
Absorbeur d'encre plein Canon Pixma MP210
djonibigoud_59 -
Mamidan -

6 réponses