capa extencible

tifnegro · #1 (**permalink**) 29/07/2010, 12:47

Bueno a ver si me puedo explicar, quiero hacer una web que tenga el menu desplegable hacia la derecha cuando pasen el raton por encima y cuando elijan algo , este menu se esconda dejando una pequeña pestaña para poder extender el menu cuando pase el raton , es quye quiero que se muestre la pagina y lo unico que se mueva es el menu
no se si me he explicado bien
desde ya muchas gracias por la ayuda y continuen asi con este foro, lo sigo hace años y como este tema no lo encuentro me registre

tifnegro · #2 (**permalink**) 29/07/2010, 12:51

o una capa que se extienda hacia el centro y que esa capa tenga los menus
alguien sabe como hacerlo porfi

tifnegro · #3 (**permalink**) 29/07/2010, 16:13

Se puede o no se puede hacer , creo que no porque no encuentro nada

Nemutagk · #4 (**permalink**) 29/07/2010, 17:43

Claro que se puede hacer, se hace con Javascript

Código HTML:

Ver original<div id="capa-extensible" onmouseover="extender()" onmouseout="retraer()">
<!-- Contenido del Div -->
</div>

El javascript:

Código Javascript:

Ver originalfunction extender() {
//El tamaño que tendra cuando se pose el cursor sobre el div
document.getElementById('capa-extensible').style.height = '100px';
}
 
function retraer() {
//Regresamos al tamaño original
document.getElementById('capa-extensible').style.height = '20px';
}

Obviamente el efecto que tendrá sobre el div es instantáneo, si deseas ir agrandando poco a poco el div puedes agregar el siguiente código

Código Javascript:

Ver originalfor(i=20; i<=100; i++) {
var newHeight = i + 'px';
document.getElementById('capa-extensible').style.height = newHeight;
}

Claro, tienes que modificarlo según tus necesidades

tifnegro · #5 (**permalink**) 01/08/2010, 14:11

gracias lo mirare haora

tifnegro · #6 (**permalink**) 01/08/2010, 18:13

Nemutagk , gracias por tu ayuda pero puse el codigo dek html y hice una hoja de js que lo llame java.js y del html lo adjunte
el casoi es que cuando pruebo no hace nada se ve toda la capa en su extencion pero no se agranda ni se achica
que estoy haciendo mal, te paso el html? por aqui

Nemutagk · #7 (**permalink**) 01/08/2010, 21:20

Raro que no ye funcione pon el código para ver lo que has hecho

tifnegro · #8 (**permalink**) 02/08/2010, 05:27

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">

</style>
<script language="JavaScript" src ="java.js"> </script>

</head>

<body>
<script type="text/javascript" >

function extender() {

//El tamaño que tendra cuando se pose el cursor sobre el div

document.getElementById('capa-extensible').style.height = '100px';

}

function retraer() {

//Regresamos al tamaño original

document.getElementById('capa-extensible').style.height = '20px';

}

for(i=20; i<=100; i++) {

var newHeight = i + 'px';

document.getElementById('capa-extensible').style.height = newHeight;

}
</script>

<div id="capa-extensible" onmouseover="extender()" onmouseout="retraer()">
<p>esto es una prueba y tendria que hacerse grande</p>
<p> </p>
<p>ghdtyk</p>
<p>fgjsrtj</p>
<p>srtjsrtj</p>
<p>srjas</p>
<p>gjsr</p>
<p>fgjha</p>
<p>frgjsr</p>
<p> </p>
</div>

<p> </p>
</body>
</html>

lo puse dentro y probe con llamarlo con una pagina externa de java que se llama java.js

Nemutagk · #9 (**permalink**) 02/08/2010, 06:43

A ver, el código Javascript va entre los Tag "<header>" y "</header">, ahora, en el css te falta esto

Código CSS:

Ver original#capa-extensible {
height: 40px;       //Te falta indicarle el tamaño inicial
overflow: hidden;   //Te falta indicarle que oculte todo 
            //el código que sobresalga de su tamaño
z-index:1;
}

Y quita esta parte del código

Código Javascript:

Ver originalfor(i=20; i<=100; i++) {
 
var newHeight = i + 'px';
 
document.getElementById('capa-extensible').style.height = newHeight;
 
}

tifnegro · #10 (**permalink**) 02/08/2010, 10:04

muchas gracias nemutag me funciono perfecto ahora le dare unos retoques y cuando termine te mostrare como quedo