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>
