Buenas, he echo algunas cosas en ajax, pero aun soy muy nobato en esto, y lo que me gustaria es lo siguiente:
Una pestaña, que al pasar el mouse por encima, se expanda y cargue contenido en ella.
he conseguido que se "expanda" de una forma sencilla, aunque me gustaria que lo hiciera ralentizandose, o sea no de golpe.
Otro problema que tengo es que centrodesplegable ha de ser de 20px de alto, y el maxidesplegable ha de ser al principio de 20px, pero desplegado de 80px, pero que no alargue el div contenedor, sino que quede por encima tapando el siguiente div, superponiendose a ellos. no se si me he explicado bien.
Por si acaso, les pongo el codigo de lo quehay de momento:
Código HTML:
<div id='centrodesplegable'>
<div class="minidesplegable" onmouseover="this.className='maxidesplegable'" onmouseout="this.className='minidesplegable'">
Vols unirte?
</div>
</div>
<div id='centro'>
<!--aqui va el contenido de la pagina que sera medio tapado por la pestaña cuando se expanda.-->
</div>
Código:
#centrodesplegable{
background: #cebca4;
width: 800px;
margin:auto;
text-align:center;
border-bottom:solid #1A1A10 0px;
}
.minidesplegable{
z-index:2;
background:#000;
height:20px;
width:400px;
overflow:visible;
text-align: center;
margin: auto;
font-size:16px; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight:600; color: #3399ff;
}
.maxidesplegable{
z-index:2;
background:#fff;
height:80px;
width:400px;
overflow:visible;
text-align: center;
margin: auto;
font-size:16px; font-family: Arial, Helvetica, sans-serif; font-style: normal; font-weight:600; color: #3399ff;
}
Si alguien puede ayudarme o darme alguna idea de alguna solucion?
he buscado bastante por internet y no encuentro nada parecido.
Gracias de antemano