Ce ne sont quasiment pas des menus déroulant !
Résolu
Shuta
Messages postés
210
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
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 :
Et là la ligne que je dois répéter a chaque fois en changeant les codes pour chaque nouvelles parties
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 !
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 !
A voir également:
- Ce ne sont quasiment pas des menus déroulant !
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel - Forum Word
- Effacer le contenue d'une cellule avec liste déroulante - Forum Excel
2 réponses
Bonjour,
Tu peux essayer ceci :
Cordialement,
Jordane
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
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/
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/
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.
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.
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...)
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 ?
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
merci beaucoup tu me sauve la vie :3
Maintenant le sujet est bien résolu :3
Bonne journée