Ayuda con los DIV Hola a todos..
Me encuentro programando un sitio web, y se me ocurrio hacer esto: tengo un texto que ocupa un 100% de la pagina, en la parte superior tengo un boton que me dice menu, al presionarlo, quisiera que desde un xtremo de la pagina, se muestre un menu en forma creciente, y al volver a hacer click en el mismo boton, este menu se vuelva a recoger, bueno eso lo logre bien, pero lo que quiero es que este menu, al momento de mostrarse se cargue sobre el texto de la pagina..
mi logica es la siguiente, para dar la apariencia de que aparece y desaparece juego con el ancho del div, inicialmente el div tiene "0px" de ancho, y al hacer un lick en el boton, este div crece hasta obtener unos "440px" de ancho, para ocultar solo repito la accion pero en forma inversa.. todo esto me salio, pero debajo de los textos,, lo que quiero es que se cargue sobre estos textos, y de derecha a izquierda, osea mi "DIV", se encuentra en la parte derecha de la pagina, al mostrarse debe de ir de derecha a izquierda, y al ocultarse de izquierda a derecha,,, este esfecto lo logro usando el estilo: "position inherit" del div,, pero al aplicar este estilo no puedo lograr que este DIV se ubique sobre mi texto...
Aca pongo mi codigo:
--Mis funciones en javascript
<script language="javascript">
function MostrarOcultar(){
AnchoMenu=document.getElementById("menu_opciones") .style.width.split("px")[0];
if(AnchoMenu=="440"){
pullit=setInterval("ocultar(document.getElementByI d('menu_opciones').style.width.split('px')[0])",20);
}
if(AnchoMenu=="0"){
pullit=setInterval("mostrar(document.getElementByI d('menu_opciones').style.width.split('px')[0])",20);
}
}
function ocultar(ancho){
if (ancho>0){
ancho=parseInt(ancho)-40;
document.getElementById("menu_opciones").style.wid th=ancho+"px";
}
else clearInterval(pullit);
}
function mostrar(ancho){
if (ancho<440){
ancho=parseInt(ancho)+40;
document.getElementById("menu_opciones").style.wid th=ancho+"px";
}
else clearInterval(pullit);
}
</script>
-- Mi Contenido
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>contenido</td>
</tr>
<tr>
<td>contenido</td>
</tr>
</table>
--Mi DIV del MENU
<div id="menu_opciones" style="width:440px; border:1px solid #000000; left: 579px; top: 120px; position:absolute;">
<table width="100%" bgcolor="#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>menu1menu1menu1menu1menu1menu1menu1menu1</td>
</tr>
<tr>
<td>menu2</td>
</tr>
</table>
</div>
Espero puedan ayudarme..
Gracias de antemano..
