Foros del Web » Creando para Internet » CSS »

Superposición de divs

Estas en el tema de Superposición de divs en el foro de CSS en Foros del Web. Buenas, Necesito hacer un menú plegable que al pulsar un botón se comprima con todo su contenido, pero no consigo que el contenido que no ...
  #1 (permalink)  
Antiguo 30/04/2011, 07:44
danihxh
Invitado
 
Mensajes: n/a
Puntos:
Superposición de divs

Buenas,

Necesito hacer un menú plegable que al pulsar un botón se comprima con todo su contenido, pero no consigo que el contenido que no cabe en el div no se muestre. He llegado a hacerlo desaparecer antes de empezar a plegar el menú, pero lo que quiero es que de la sensación que su contenido queda detrás.

Código:
<html>
<head>
<script languaje="JavaScript">
function funcion()
{
	contenedor=document.getElementById("contenedor");
	pie=document.getElementById("pie");
	

	if(contenedor.className=="contenedorC")
	{
		contenedor.className="contenedorA";
		document.getElementById("contenido").className="estilo3";
		pie.innerHTML="Cerrar";
	}
	else
	{
		contenedor.className="contenedorC";
		document.getElementById("contenido").className="estilo4";
		pie.innerHTML="Abrir";
	}
}
</script>

<style>
.contenedorA
{
	width: 200px;
	height: 200px;
	background-color: #AAAAAA;
	-webkit-transition: all 2s ease;
	border-radius: 3px;
	position: relative;
	border: 1px solid #DDDDDD;
}

.contenedorC
{
	width: 200px;
	height: 20px;
	background-color: #AAAAAA;
	-webkit-transition: all 2s ease;
	border-radius: 3px;
	position: relative;
	border: 1px solid #DDDDDD;
}

.estilo3
{
	-webkit-transition: all 3s ease;
	opacity: 100;
	visibility: visible;
	z-index:-2;
}

.estilo4
{

	-webkit-transition: all 1s ease;
	//opacity: 0;
	//visibility: hidden;
	z-index:-2;
}

.pie
{
	width: 200px;
	height: 20px;
	background-color: #CCCCCC;
	border-radius: 3px;
	position: absolute;
	bottom: 0px;
}

</style>
</head>
<body>
	<div id="contenedor" class="contenedorA">
		<div id="contenido" class="estilo3">
			aaa
			<br>
			bbb
			<br>
			ccc
			<br>
			ddd
			<br>
			bbb
			<br>
			ccc
			<br>
			ddd
		</div>
		<div id="pie" class="pie" onClick="funcion()">
			Cerrar
		</div>
	</div>
	<div id="cuerpo" style="background-color: #FF00FF;">aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br>aa<br></div>

</body>
</html>
  #2 (permalink)  
Antiguo 30/04/2011, 07:46
danihxh
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Superposición de divs

Problema solucionado, no recordaba la propiedad overflow ¬¬'

Etiquetas: collapsable, divs, plegable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:58.