Comment puis-je passer un div pour révéler le contenu avec les CSS
Donc j'ai un div qui doit se développer pour faire apparaître une liste lorsqu'elle est activée. L'avant et l'après, les états peuvent être vus ici http://reversl.net/box/ mais de quoi ai-je besoin d'ajouter à mon style pour que cela se produise? Je voudrais utiliser les transitions css pour plus d'effet. Je ne suis pas inquiet au sujet de la compatibilité du navigateur, car c'est juste à des fins d'apprentissage. Des conseils à donner?
<div class="box"><img src="http://www.placehold.it/250x300" alt="" />
<div class="section progress">
<h4>
<a href="#">Div Before</a>
</h4>
<div class="metrics">
<div class="meter">
<span style="width: 75%"></span>
</div><!--.meter-->
</div><!--.metrics-->
</div><!--.section-progress-->
</div><!--.box-->
<div class="box"><img src="http://www.placehold.it/250x300" alt="" />
<div class="section progress">
<h4>
<a href="#">Div After</a>
</h4>
<div class="metrics">
<div class="meter">
<span style="width: 75%"></span>
</div><!--.meter-->
</div><!--.metrics-->
</div><!--.section-progress-->
<div class="sub_section">
<ul class="list">
<li>Item 1</li>
<li class="last">Item 2</li>
</ul>
</div><!--.sub_section-->
</div><!--.box-->
.boxes {
width: 100%;
padding: 1%;
}
.box {
width: 20%;
padding: 1%;
background: #fff;
-moz-box-shadow: 2px 3px 4px 0px #e9e9e9;
-webkit-box-shadow: 2px 3px 4px 0px #e9e9e9;
box-shadow: 2px 3px 3px 0px #e9e9e9;
display: inline-block;
margin-top: 1em;
}
.box img {
margin-bottom: 1%;
}
.progress a {
margin: 0;
padding: 0;
color: #999;
text-decoration: none;
}
.metrics {
margin: -1em 0 0 0;
padding: 0;
background: #c0c0c0;
}
.accordion .progress .meter {
background: #555;
width: 100%;
position: relative;
}
.meter > span {
height: 10px;
display: block;
background-color: #777;
position: relative;
overflow: hidden;
}
.sub_section {
margin-top: 1em;
border-bottom: none;
}
.list {
padding: 0;
margin: 0;
}
.list li {
background: #dcdcdc url('http://placehold.it/40x40') no-repeat;
font-size: 11px;
color: #999;
list-style: none;
padding: 1.3em 1em 1.3em 4.5em;
margin-bottom: 5px;
}
.list .last {
border-bottom: none;
}
que signifie "bascule"? passage de la souris? onclick?
OriginalL'auteur Jedda | 2012-04-12
Vous devez vous connecter pour publier un commentaire.
Je crains que je ne pouvais pas, dans votre exemple de code et de l'image, ce que tu voulais pour cliquer sur et à ce que nous voulions montrer. Cependant, les ouvrages suivants, avec une
onclick
-comme événement pur CSS:CSS:
JS Fiddle démo.
Malheureusement, il semble (dans Chrome 17/Ubuntu 11.04) impossible à animer à partir de
display: none;
àdisplay: block;
de Même une transition deheight: 0
àheight: auto
ne (veut, soit les résultats dans une apparition soudaine plutôt qu'une transition. De sorte que le contenu de la démo est toujours "là", mais tout simplement caché (avec une opacité) et ensuite montré que lorsque le lien est cliqué.Cependant pour une diapositive-bascule comme effet:
JS Fiddle démo.
Excellent travail! C'est presque exactement ce que je suis après. Voir ici reversl.net/box/#top Est-il un moyen de le configurer de sorte qu'en cliquant sur le même lien se cache de nouveau le contenu plutôt que de cliquer sur 'fermer' lien à l'intérieur de la cible?
Merci d'une usine. Voir mon adaptation ci-dessus.
Puisque vous êtes en utilisant le lien de l'attribut href pour définir l'uri-fragment (que j'ai complètement oublié de vous peut le faire), vous devez modifier le href lors d'un clic. Sinon, vous ne serez pas en mesure d'accomplir ceci avec un seul lien, sans JS. (Sauf, bien sûr, il y a un moyen de changer un élément de l'attribut sans l'aide de JS.)
C'est une solution fantastique.
OriginalL'auteur David Thomas
Vous pouvez utiliser la Case à cocher "Hack": http://css-tricks.com/the-checkbox-hack/
OriginalL'auteur kingjeffrey
Fait ces modifications de votre code vous donnera une transition CSS.
À l'intérieur de votre
<div class="box">
, ajouter un conteneur<div class="trans">
autour du contenu, comme suit:Puis, dans votre css, ajouter:
Cela vous donnera une mouseenter/mouseleave type d'effet. Je ne pense pas que vous seriez en mesure de faire un "onclick" type d'effet le maintenir ouvert avec juste CSS.
Génial. Je me demande pourrait vous obtenir le "onclick" effet à l'aide de CSS3 :cible pseudo-classe vu ici paulrhayes.com/2009-06/accordion-using-only-css Bien que j'aurais l'idée de savoir comment l'appliquer à mon exemple. Onequestion sur votre solution: Est-il un moyen de l'avoir pas pousser le div en haut de la page lors de son survol. c'est à dire pourrait le div étendre vers le bas seulement?
Cible nécessite une uri-identificateur de fragment. Vous auriez besoin de javascript pour modifier la fenêtre pour ajouter un. reference.sitepoint.com/css/pseudoclass-target
OriginalL'auteur redlena
Vous allez avoir besoin d'utiliser javascript pour écouter l'événement qui déclenche la transition, sauf si vous le souhaitez appliquer sur le vol stationnaire. donc, vous pouvez commencer avec quelque chose comme ceci:
Puis dans le css, vous avez besoin d'avoir la classe avec la nouvelle taille et la transition appliquée:
Si vous voulez purement CSS solution, alors vous aurez à gérer cela à l'aide de la": hover " pseudo-classe comme redlena dit. La seule différence que je ferais est que vous n'avez pas besoin d'un autre div (.trans) et vous n'avez pas besoin de spécifier le sélecteur d'enfant dans votre CSS (.boîte > .trans).
OriginalL'auteur Alex Morales
Cela ne peut être réalisé avec de la pure CSS, essayez d'utiliser JavaScript ou jQuery
Ce exemple qui vous rapproche, mais il ne reste pas active une fois cliqué.
OriginalL'auteur jacktheripper