A voir également:
- Boite déroulante : effet accordéon
- Liste déroulante excel - Guide
- Se connecter à ma boite hotmail - Guide
- Liste déroulante en cascade - Guide
- Boite gmail saturée - Guide
- Boîte mail française gratuite - Guide
5 réponses
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
Modifié par RAD ZONE le 1/10/2013 à 20:35
Modifié par RAD ZONE le 1/10/2013 à 20:35
Salut
sinon sans js mais avec un peu de boulot css
un exemple en css html5!
tu decide des hauteurs d accordeons en fonction du texte , j ai commente le css ou modifier ! important ne pas donner des "name" different aux imput sinon plus de fermeture ouverture ;-)))
ps: ne passe pas sur ie8 et inferieur
a+
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
sinon sans js mais avec un peu de boulot css
un exemple en css html5!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
RAD ZONE Webcreation
</title>
<style type="text/css">
<!--
/* CSS reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
address, caption, cite, code, dfn, th, var {
font-style: normal;
font-weight: normal;
}
ol, ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
}
section, header{
display: block;
}
/*Style General */
body{
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
background: #e0e3ec;
font-weight: 400;
font-size: 15px;
color: #393b40;
overflow-y: scroll;
}
a{
color: #333;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
text-align: center;
}
.clr{
clear: both;
}
.Accordeon-container{
width: 400px;
margin: 10px auto 30px auto;
text-align: left;
}
.Accordeon-container label{
font-family: 'Arial Narrow', Arial, sans-serif;
padding: 5px 20px;
position: relative;
z-index: 20;
display: block;
height: 30px;
cursor: pointer;
color: #777;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
line-height: 33px;
font-size: 19px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #ffffff), color-stop(100%, #eaeaea));
background: -webkit-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -o-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: -ms-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
background: linear-gradient(top, #ffffff 1%, #eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 1px 0px 0px 0px rgba(255, 255, 255, 0.9) inset, 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.Accordeon-container label:hover{
background: #fff;
}
.Accordeon-container input:checked + label, .Accordeon-container input:checked + label:hover{
background: #c6e1ec;
color: #3d7489;
text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3), 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.Accordeon-container label:hover:after, .Accordeon-container input:checked + label:hover:after{
content: '';
position: absolute;
width: 24px;
height: 24px;
right: 13px;
top: 7px;
/* background: transparent url(../images/fleche_down.png) no-repeat center center;
image de fleche a creer */
}
.Accordeon-container input:checked + label:hover:after{
/*background-image: url(../images/fleche_up.png);
image de fleche a creer */}
.Accordeon-container input{
display: none;
}
.Accordeon-container article{
background: rgba(255, 255, 255, 0.5);
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.Accordeon-container article p{
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.Accordeon-container input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
box-shadow: 0px 0px 0px 1px rgba(155, 155, 155, 0.3);
}
.Accordeon-container input:checked ~ article.Accordeon-petit{
height: 120px;/* c est la que tu met les hauteurs que tu veux */
}
.Accordeon-container input:checked ~ article.Accordeon-moyen{
height: 180px;/* c est la que tu met les hauteurs que tu veux */
}
.Accordeon-container input:checked ~ article.Accordeon-grand{
height: 550px;/* c est la que tu met les hauteurs que tu veux */
}
.Accordeon-container input:checked ~ article.Accordeon-tres-grand{
height: 850px;/* c est la que tu met les hauteurs que tu veux */
}
-->
</style>
<!-- JS MODERNIZR pour la reco CSS3 HTML5-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<!-- JS MODERNIZR -->
</head>
<body>
<div class="container">
<section class="Accordeon-container">
<div>
<input id="Accordeon-1" name="Accordeon-1" type="radio" checked> <label for="Accordeon-1">Accordeon
petit</label>
<article class="Accordeon-petit">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>Tibi hoc incredibile, quod beatissimum.</em>
Philosophi autem in suis lectulis plerumque moriuntur.
</p>
</article>
</div>
<div>
<input id="Accordeon-2" name="Accordeon-1" type="radio"> <label for="Accordeon-2">Accordeon tres
grand</label>
<article class="Accordeon-tres-grand">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href='http://loripsum.net/' target=
'_blank'>Duo Reges: constructio interrete.</a> Quid est igitur, inquit, quod requiras? Claudii libidini,
qui tum erat summo ne imperio, dederetur. Restatis igitur vos; Quid, quod homines infima fortuna, nulla
spe rerum gerendarum, opifices denique delectantur historia? Ut id aliis narrare gestiant? Ad corpus
diceres pertinere-, sed ea, quae dixi, ad corpusne refers? Quae quo sunt excelsiores, eo dant clariora
indicia naturae. <strong>Certe, nisi voluptatem tanti aestimaretis.</strong> <mark>Sint ista
Graecorum;</mark>
</p>
<h1>
Istam voluptatem, inquit, Epicurus ignorat?
</h1>
<p>
Praeteritis, inquit, gaudeo. Audax negotium, dicerem impudens, nisi hoc institutum postea translatum ad
philosophos nostros esset. Vitiosum est enim in dividendo partem in genere numerare. Quamquam ab iis
philosophiam et omnes ingenuas disciplinas habemus; Quid est, quod ab ea absolvi et perfici debeat? Quae
quidem sapientes sequuntur duce natura tamquam videntes; Expectoque quid ad id, quod quaerebam,
respondeas. Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Cur ipse Pythagoras et
Aegyptum lustravit et Persarum magos adiit?
</p>
<h2>
Cum audissem Antiochum, Brute, ut solebam, cum M.
</h2>
<ul>
<li>Ea, quae dialectici nunc tradunt et docent, nonne ab illis instituta sunt aut inventa sunt?
</li>
<li>Quod si ita sit, cur opera philosophiae sit danda nescio.
</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egone non intellego, quid sit don Graece, Latine
voluptas? Iam in altera philosophiae parte. Omnes enim iucundum motum, quo sensus hilaretur. Habent enim
et bene longam et satis litigiosam disputationem. Quantum Aristoxeni ingenium consumptum videmus in
musicis? Idemne potest esse dies saepius, qui semel fuit? Restinguet citius, si ardentem acceperit.
<em>Duo Reges: constructio interrete.</em>
</p>
</article>
</div>
<div>
<input id="Accordeon-3" name="Accordeon-1" type="radio"> <label for="Accordeon-3">Accordeon grand</label>
<article class="Accordeon-grand">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Atque hoc loco similitudines eas, quibus illi
uti solent, dissimillimas proferebas. Ut in geometria, prima si dederis, danda sunt omnia. Quod
praeceptum quia maius erat, quam ut ab homine videretur, idcirco assignatum est deo.
</p>
<h1>
Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret?
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Quorum sine causa fieri nihil putandum
est.</strong> <mark>Comprehensum, quod cognitum non habet?</mark> Et non ex maxima parte de tota
iudicabis? Nemo nostrum istius generis asotos iucunde putat vivere. Vitae autem degendae ratio maxime
quidem illis placuit quieta. Cum audissem Antiochum, Brute, ut solebam, cum M. Duo Reges: constructio
interrete.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Atque hoc loco similitudines eas, quibus illi
uti solent,Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>Quodsi ipsam honestatem undique
pertectam atque absolutam.</em> Restinguet citius, si ardentem acceperit.
</p>
</article>
</div>
<div>
<input id="Accordeon-4" name="Accordeon-1" type="radio"> <label for="Accordeon-4">Accordeon moyen</label>
<article class="Accordeon-moyen">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Habes, inquam, Cato, formam eorum, de quibus
loquor, philosophorum. Nec lapathi suavitatem acupenseri Galloni Laelius anteponebat, sed suavitatem
ipsam neglegebat; <strong>Sed fortuna fortis;</strong> Sed ad bona praeterita redeamus. <strong>Quonam,
inquit, modo?</strong> Non laboro, inquit, de nomine.
</p>
</article>
</div>
</section>
</div>
</body>
</html>
tu decide des hauteurs d accordeons en fonction du texte , j ai commente le css ou modifier ! important ne pas donner des "name" different aux imput sinon plus de fermeture ouverture ;-)))
ps: ne passe pas sur ie8 et inferieur
a+
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
salut
jquery UI
https://jqueryui.com/accordion/#no-auto-height
tu as plusieurs options, dont "no auto height"
jquery UI
https://jqueryui.com/accordion/#no-auto-height
tu as plusieurs options, dont "no auto height"
bbaasstt
Messages postés
190
Date d'inscription
mercredi 1 avril 2009
Statut
Membre
Dernière intervention
16 décembre 2016
17
1 oct. 2013 à 17:24
1 oct. 2013 à 17:24
si tu veut mettre des effets sur ton site il te faudrat t'atteler au javascript ! regarde du coter du Jquery
ideal23
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 mai 2014
28
1 oct. 2013 à 17:25
1 oct. 2013 à 17:25
tu fais menu accordéon sur google tu devrais trouver ton bonheur.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question