Abrir y cerrar menu y que se ajusten los dovs

abisquett · #1 (**permalink**) 05/08/2009, 10:36

Hola soy nuevo en esto del css

El asunto es que tengo un menú que abre y cierra de forma vertical

eso lo logre, pero necesito poner al lado del menú un div con contenido, que cuando
se abra el menú se ajuste al ancho y cuando se cierre también se ajuste al nuevo ancho.

se me ha echo imposible..alguien podría ayudarme por favor
Gracias

buzu · #2 (**permalink**) 05/08/2009, 10:45

todo depende del markup que tengas, puede ser que lo puedaslograr con simple CSS o que necesites javascript. Es cuestion de ver tu code...

Malaria · #3 (**permalink**) 05/08/2009, 10:53

Pasate por mi web y mira ver si el menu que tengo es el que quieres:

www.kuchiyosenf.com

Si es ese te lo paso.

abisquett · #4 (**permalink**) 05/08/2009, 10:56

<
este es el código que logre
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>NB6 Estudio y Comprensión de la Naturaleza</title>
<link href="../css/abisquett.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../menu1/menu_izquierda.css" type="text/css" />

<script type="text/javascript">function mostrardiv(){
document.getElementById('flotante').style.display = 'block';
document.getElementById('apDiv4').style.display = 'none';
document.getElementById('apDiv1').style.display = 'none';
document.getElementById('apDiv6').style.display = 'none';
document.getElementById('apDiv7').style.display = 'block';
}
function cerrar(){
document.getElementById('flotante').style.display = 'none';
document.getElementById('apDiv4').style.display = 'block';
document.getElementById('apDiv1').style.display = 'block';
document.getElementById('apDiv6').style.display = 'block';
document.getElementById('apDiv7').style.display = 'none';
}

function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
</script>
<style type="text/css">

</style>
</head>
<body>

<div id="all">
<div id="apDiv1">
<div id="apDiv4" style="display:block"><img src="../imagenes/tab_menu.png" border="0" onclick="MM_callJS('mostrardiv()')"/></div>
</div>
<div id="apDiv6"><a href="javascript: self.close()"><img src="../imagenes/tab_OFF.jpg" alt="Cerrar Pantalla Completa" width="19" height="37" border="0"/></a></div>

<div id="flotante" style="display:none;">
<div id="apDiv7"><a href="javascript: self.close()"><img src="../imagenes/tab_OFF.jpg" alt="Cerrar Pantalla Completa" width="19" height="37" border="0"/></a></div>
<div id="menu_flotante">
<div id="apDiv5"> <img src="../imagenes/tab_menu.png" height="74" border="0" onclick="MM_callJS('cerrar();')"/></div>
<ul id="menu">
<li>

<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item5</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item5</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item5</li>

</ul>
</div>

</div>
<div id="contenido"><iframe id="scoframe" name="scoframe" ></iframe></div></div>

</body>
</html>

el asunto es que cuando esta cerrado el div contenido se muestra bien pero cuando se despliega me tira el contenido abajo..eso es lo que no he podido solucionar

Muchas Gracias!!!!

buzu · #5 (**permalink**) 05/08/2009, 11:00

en tal caso, lo que te conviene es poner el position de tu elementos desplegables a absolute de modo que no te afecten el contenido que ya tienes, es decir, que no se desplace hacia abajo.
Eso con css es algo asi:

position: absolute;

abisquett · #6 (**permalink**) 05/08/2009, 11:11

no funciona. los divs no pueden "trabajarse" como tablas algo así?? en tabla claramente seria muy fácil lo que quiero con dos columnas.

buzu · #7 (**permalink**) 05/08/2009, 21:18

Si se pueden trabajar como tablas. Pero el problema quiza sea que aun no tengo claro al 100% lo que quieres, popr que no pones una imagen de lo que quieres, de como se muestra en los dos estados, es decir abirto y cerrado el desplegable, asi te entiendo mejor.