Foros del Web » Creando para Internet » Diseño web »

capa extencible

Estas en el tema de capa extencible en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/07/2010, 13:47
 
Fecha de Ingreso: julio-2010
Mensajes: 11
Antigüedad: 7 años, 4 meses
Puntos: 0
capa extencible

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
  #2 (permalink)  
Antiguo 29/07/2010, 13:51
 
Fecha de Ingreso: julio-2010
Mensajes: 11
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: capa extencible

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

Última edición por tifnegro; 29/07/2010 a las 15:19
  #3 (permalink)  
Antiguo 29/07/2010, 17:13
 
Fecha de Ingreso: julio-2010
Mensajes: 11
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: capa extencible

Se puede o no se puede hacer , creo que no porque no encuentro nada
  #4 (permalink)  
Antiguo 29/07/2010, 18:43
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 13 años, 8 meses
Puntos: 406
Respuesta: capa extencible

Claro que se puede hacer, se hace con Javascript
Código HTML:
Ver original
  1. <div id="capa-extensible" onmouseover="extender()" onmouseout="retraer()">
  2. <!-- Contenido del Div -->
  3. </div>

El javascript:
Código Javascript:
Ver original
  1. function extender() {
  2. //El tamaño que tendra cuando se pose el cursor sobre el div
  3. document.getElementById('capa-extensible').style.height = '100px';
  4. }
  5.  
  6. function retraer() {
  7. //Regresamos al tamaño original
  8. document.getElementById('capa-extensible').style.height = '20px';
  9. }

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 original
  1. for(i=20; i<=100; i++) {
  2. var newHeight = i + 'px';
  3. document.getElementById('capa-extensible').style.height = newHeight;
  4. }

Claro, tienes que modificarlo según tus necesidades
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)
  #5 (permalink)  
Antiguo 01/08/2010, 15:11
 
Fecha de Ingreso: julio-2010
Mensajes: 11
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: capa extencible

gracias lo mirare haora
  #6 (permalink)  
Antiguo 01/08/2010, 19:13
 
Fecha de Ingreso: julio-2010
Mensajes: 11
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: capa extencible

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
  #7 (permalink)  
Antiguo 01/08/2010, 22:20
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 13 años, 8 meses
Puntos: 406
Respuesta: capa extencible

Raro que no ye funcione pon el código para ver lo que has hecho
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)
  #8 (permalink)  
Antiguo 02/08/2010, 06:27
 
Fecha de Ingreso: julio-2010
Mensajes: 11
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: capa extencible

<!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">
<!--
#capa-extensible {
z-index:1;
}
-->
</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>&nbsp;</p>
<p>ghdtyk</p>
<p>fgjsrtj</p>
<p>srtjsrtj</p>
<p>srjas</p>
<p>gjsr</p>
<p>fgjha</p>
<p>frgjsr</p>
<p>&nbsp;</p>
</div>

<p>&nbsp;</p>
</body>
</html>





lo puse dentro y probe con llamarlo con una pagina externa de java que se llama java.js
  #9 (permalink)  
Antiguo 02/08/2010, 07:43
Avatar de Nemutagk
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: México
Mensajes: 2.633
Antigüedad: 13 años, 8 meses
Puntos: 406
Respuesta: capa extencible

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
  1. #capa-extensible {
  2. height: 40px;       //Te falta indicarle el tamaño inicial
  3. overflow: hidden;   //Te falta indicarle que oculte todo
  4.             //el código que sobresalga de su tamaño
  5. z-index:1;
  6. }

Y quita esta parte del código
Código Javascript:
Ver original
  1. for(i=20; i<=100; i++) {
  2.  
  3. var newHeight = i + 'px';
  4.  
  5. document.getElementById('capa-extensible').style.height = newHeight;
  6.  
  7. }
__________________
Listo?, tendría que tener 60 puntos menos de IQ para considerarme listo!!!
-- Sheldon Cooper
http://twitter.com/nemutagk
PD: No contestaré temas vía mensaje personal =)
  #10 (permalink)  
Antiguo 02/08/2010, 11:04
 
Fecha de Ingreso: julio-2010
Mensajes: 11
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: capa extencible

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

Etiquetas: capas
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 18:48.