Foros del Web » Creando para Internet » CSS »

Abrir y cerrar menu y que se ajusten los dovs

Estas en el tema de Abrir y cerrar menu y que se ajusten los dovs en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/08/2009, 11:36
 
Fecha de Ingreso: abril-2006
Mensajes: 5
Antigüedad: 11 años, 8 meses
Puntos: 0
Abrir y cerrar menu y que se ajusten los dovs

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
  #2 (permalink)  
Antiguo 05/08/2009, 11:45
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Abrir y cerrar menu y que se ajusten los dovs

todo depende del markup que tengas, puede ser que lo puedaslograr con simple CSS o que necesites javascript. Es cuestion de ver tu code...
__________________
twitter: @imbuzu
  #3 (permalink)  
Antiguo 05/08/2009, 11:53
 
Fecha de Ingreso: julio-2005
Ubicación: En el país del a ignorancia
Mensajes: 72
Antigüedad: 12 años, 4 meses
Puntos: 0
Respuesta: Abrir y cerrar menu y que se ajusten los dovs

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.
  #4 (permalink)  
Antiguo 05/08/2009, 11:56
 
Fecha de Ingreso: abril-2006
Mensajes: 5
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Abrir y cerrar menu y que se ajusten los dovs

<
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">
<!--

#apDiv2 {
position:absolute;
left:229px;
top:12px;
width:830px;
height:299px;
z-index:2;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
text-decoration: none;
top: 12px;
margin-top: 12px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 220px;
}
.Estilo1 {
color: #333333;
font-size: 18px;
}
#apDiv3 {
position:absolute;
left:34px;
top:155px;
width:940px;
height:408px;
z-index:2;
}
#apDiv4 {
position:absolute;
left:33px;
top:63px;
width:23px;
height:75px;
z-index:3;
cursor: pointer;
cursor: hand;
}
#apDiv5 {
position:absolute;
left:209px;
top:58px;
width:32px;
height:76px;
z-index:4;
cursor: pointer;
cursor: hand;
}
#apDiv1 {
position:absolute;
left:-17px;
top:-3px;
width:35px;
height:943px;
z-index:4;
background-image: url(../imagenes/fullbg.jpg);
background-repeat: repeat-y;
}
#apDiv6 {
position:absolute;
left:17px;
top:19px;
width:22px;
height:36px;
z-index:5;
}
#apDiv7 {
position:absolute;
left:209px;
top:19px;
width:22px;
height:36px;
z-index:5;
}
iframe {
white-space: normal;
margin: 0px;
padding: 0px;
height: 800px;
width: 100%;
margin-bottom:inherit
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
overflow: auto;
visibility: visible;
z-index: auto;
clear: left;
position: relative;
float: none;
border-top-style: none;
}
#contenido {
position: relative;
top: 10px;
left: 40px;
}

-->
</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!!!!
  #5 (permalink)  
Antiguo 05/08/2009, 12:00
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Abrir y cerrar menu y que se ajusten los dovs

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;
__________________
twitter: @imbuzu
  #6 (permalink)  
Antiguo 05/08/2009, 12:11
 
Fecha de Ingreso: abril-2006
Mensajes: 5
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: Abrir y cerrar menu y que se ajusten los dovs

no funciona. los divs no pueden "trabajarse" como tablas algo así?? en tabla claramente seria muy fácil lo que quiero con dos columnas.
  #7 (permalink)  
Antiguo 05/08/2009, 22:18
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Abrir y cerrar menu y que se ajusten los dovs

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.
__________________
twitter: @imbuzu
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 08:34.