Foros del Web » Creando para Internet » CSS »

Menu despegable

Estas en el tema de Menu despegable en el foro de CSS en Foros del Web. Hola a todos soy nuevo por aki y novato en web y voy haciendo mis cosillas... Un saludo a todos, tngo una dudilla, que es ...
  #1 (permalink)  
Antiguo 16/02/2011, 08:28
Avatar de inkfusion  
Fecha de Ingreso: febrero-2011
Mensajes: 16
Antigüedad: 6 años, 9 meses
Puntos: 2
Menu despegable

Hola a todos soy nuevo por aki y novato en web y voy haciendo mis cosillas...
Un saludo a todos, tngo una dudilla, que es que hace poco me baje un ejemplo de un menu despegable como este: ya lo he tocado algo yo:

<html>
<head>
<title>inkfusion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#capa_contenedora{
position:absolute;
width:150px;
top:50px;
/*height:50px;*/
background:#000000;
z-index:4;
}
#ill{
color:#FFFFFF;
margin-left:15px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
<script language="javascript">
var SalirMenu=0,Nuevo=0;
function aparecer(){
Nuevo=parseFloat(document.getElementById("capa_con tenedora").style.left)+2;
document.getElementById("capa_contenedora").style. left=Nuevo+"px";
if(Nuevo<0 && SalirMenu==1){
setTimeout("aparecer()",1);
}
}
function desaparecer(){
Nuevo=parseFloat(document.getElementById("capa_con tenedora").style.left)-2;
document.getElementById("capa_contenedora").style. left=Nuevo+"px";
if(Nuevo>-130 && SalirMenu==0){
setTimeout("desaparecer()",1);
}
}
</script>
</head>

<body>
<div id="capa_contenedora" style="left:-130" onMouseOver="SalirMenu=1;aparecer();" onMouseOut="SalirMenu=0;desaparecer();">

<div id="ill">
ILLUSTRATION
</div>
</div>
</body>
</html>

y va de perlas, pro ahora lo quiero meter a una pagina que esty montando, pro, se se me descoloca todo, y no funciona nada el menu:

<!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>Inkfusion</title>


<script language="javascript">
var SalirMenu=0,Nuevo=0;
function aparecer(){
Nuevo=parseFloat(document.getElementById("capa_con tenedora").style.left)+2;
document.getElementById("capa_contenedora").style. left=Nuevo+"px";
if(Nuevo<0 && SalirMenu==1){
setTimeout("aparecer()",1);
}
}
function desaparecer(){
Nuevo=parseFloat(document.getElementById("capa_con tenedora").style.left)-2;
document.getElementById("capa_contenedora").style. left=Nuevo+"px";
if(Nuevo>-130 && SalirMenu==0){
setTimeout("desaparecer()",1);
}
}
</script>
<style type="text/css">

body{
background-color:#CCCCCC;
margin:0px;
}

#contenedor{
background-color:#FFFFFF;
width:1100px;
margin:auto;
}

#cabecera{
background-color:#000000;
}

#logo{
margin-left:10px;
padding:20px 0;
float:left;
}

#as{
float:right;
margin-right:10px;
padding-top:20px;
}

.nofloat{
clear:both;
}

#menu{
background-color:#FF0000;
width:190px;
height:180px;
margin:0px;
font-size:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
list-style:none;
}

.navegador{
background-color:#FFFFFF;
}

#capa_contenedora{
position:absolute;
width:150px;
top:50px;
/*height:50px;*/
background:#000000;
z-index:4;
}

#ill{
color:#FFFFFF;
margin-left:15px;
font-family:Arial, Helvetica, sans-serif;
}

</style>
</head>
<body>

<div id="capa_contenedora" style="left:-130" onMouseOver="SalirMenu=1;aparecer();" onMouseOut="SalirMenu=0;desaparecer();">

<div id="ill">
ILLUSTRATION
</div>
</div>

<div id="contenedor">
<div id="cabecera">

<div id="logo">
<img src="images/logo.png" width="228" height="38">
</div>

<div id="as">
<img src="images/as.png" width="45" height="38">
</div>
<div class="nofloat"></div>

</div>

<div id="menu">
<div class="navegador">
<ul id="menu">
<li>WALL PAINTS</li>
<li>ILLUSTRATION</li>
<li>GRAPHIC DESIGN</li>
<li>PHOTOGRAPHY</li>
</ul>
</div>
</div>
<div id="cuerpo">
</div>

</div>
<div id="pie">

</div>
</div>
</body>
</html>



No se que pasa, pro creo que deberia funcionar, pro no, a ver si podeis ayudarme pork m sty volviendo loco

gracias a todos de antemano!!


www.inkfusion.es
  #2 (permalink)  
Antiguo 16/02/2011, 09:26
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Menu despegable

Seria mas facil ayudarte si publicaras la URL de tu sitio
  #3 (permalink)  
Antiguo 16/02/2011, 12:41
Avatar de inkfusion  
Fecha de Ingreso: febrero-2011
Mensajes: 16
Antigüedad: 6 años, 9 meses
Puntos: 2
Respuesta: Menu despegable

seria mas facil si, pero como es una prueba que esty haciendo no lo he querido subir, de todas formas la puedo subir a algún sitio gratuito para que le exes un vistazo, lo veré a ver, pork desde aqui no ves ningun fallo ni nada no? gracias por responder :)
  #4 (permalink)  
Antiguo 16/02/2011, 12:45
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Menu despegable

Pues lo he copiado y pegado a un html y no me sirve ni siquiera el primero :/ no sera que lo copiaste mal?
  #5 (permalink)  
Antiguo 16/02/2011, 15:27
Avatar de inkfusion  
Fecha de Ingreso: febrero-2011
Mensajes: 16
Antigüedad: 6 años, 9 meses
Puntos: 2
Respuesta: Menu despegable

no? que raro, voy a ver si consigo subirlo a algun servidor para que puedas verlo mejor, a mi si que me funciona el primero, el segundo es el que no, pro el primero si...:s
  #6 (permalink)  
Antiguo 16/02/2011, 16:44
Avatar de inkfusion  
Fecha de Ingreso: febrero-2011
Mensajes: 16
Antigüedad: 6 años, 9 meses
Puntos: 2
Respuesta: Menu despegable

hola de nuevo, ya lo he subido, pro tiene k pasar entre 1 o 2 dias para que me lo validen DNS o algo asi, (no se lo que es la verdad) aunke ya subi el archivo al host, te dejo el link para ke lo veas, es el previw, ya t digo que el dominio aun no esta disponible, espero que lo puedas ver

http://f3-preview.runhosting.com/inkfusionpruebas.com/
  #7 (permalink)  
Antiguo 16/02/2011, 17:55
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Menu despegable

a ya... no me habia fijado que ese cuadro negro era el desplegable XD, a mi me funcionana bien los 2, solo que el segundo ejemplo cuando lo copio y pego me sale en el javascript "capa_con tenedora" en lugar de "capa_contenedora" revisa eso, talvez alli esta el error
  #8 (permalink)  
Antiguo 17/02/2011, 09:41
Avatar de inkfusion  
Fecha de Ingreso: febrero-2011
Mensajes: 16
Antigüedad: 6 años, 9 meses
Puntos: 2
Respuesta: Menu despegable

vale, pues todo perfect, y la duda del principio era esto: al crear otro mnu debajo no se como hacerlo, dle dado vueltas pro nose como poner el otro apartado del menu debajo de ilustraciones, aqui puedes ver que se montan, he probado con margin pro nada :s gracias por tu tiempo

http://f3-preview.runhosting.com/inkfusionpruebas.com/
  #9 (permalink)  
Antiguo 17/02/2011, 10:15
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Menu despegable

Claro, el margen no va a servir porque estan en posicion absoluta, en lugar de ponerle un margen en el segundo div que tiene el id capa_contenedora en donde dice style="left:-130" agregale style="left:-130; top:80px;" ya que el primero esta en 50px, el segundo lo puedes poner en 80, el tercero en 110 y asi sucesivamente.

Ahora tienes otro problema:
El javascript no te va a servir. por qué? porque el javascript mueve el div con el id capa_contenedora y los dos se llaman capa_contenedora, es decir no va a distinguir cual mover.

Ya con todos los cambios, quedaria asi:

Código:
<html> 
<head> 
<title>inkfusion</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style> 
.capa_contenedora{
position:absolute;
width:170px;
/*height:50px;*/
background:#000000;
z-index:4;
}
 
.text{
color:#FFFFFF;
margin-left:15px;
font-family:Arial, Helvetica, sans-serif;
 
}
</style> 
 
<script language="javascript"> 
var SalirMenu=0,Nuevo=0;
function aparecer(id){
    Nuevo=parseFloat(document.getElementById(id).style.left)+2;
    document.getElementById(id).style.left=Nuevo+"px";
    if(Nuevo<0 && SalirMenu==1){
        setTimeout("aparecer('"+id+"')",1);
    }
}
function desaparecer(id){
    Nuevo=parseFloat(document.getElementById(id).style.left)-2;
    document.getElementById(id).style.left=Nuevo+"px";
    if(Nuevo>-150 && SalirMenu==0){
        setTimeout("desaparecer('"+id+"')",1);
    }
}
</script> 
</head> 
 
 
<body> 
<div id="illustration" class="capa_contenedora" style="left:-150; top:50px;" onMouseOver="SalirMenu=1;aparecer('illustration');" onMouseOut="SalirMenu=0;desaparecer('illustration');"> 
	<div class="text"> 
	ILLUSTRATION
	</div> 
</div> 
 
<div id="gdesign" class="capa_contenedora" style="left:-150; top:80px;" onMouseOver="SalirMenu=1;aparecer('gdesign');" onMouseOut="SalirMenu=0;desaparecer('gdesign');"> 
	<div class="text"> 
	GRAPHIC DESIGN
	</div> 
</div> 

</body> 
</html>
  #10 (permalink)  
Antiguo 17/02/2011, 11:08
Avatar de inkfusion  
Fecha de Ingreso: febrero-2011
Mensajes: 16
Antigüedad: 6 años, 9 meses
Puntos: 2
Respuesta: Menu despegable

gracias crack, voi a ver si lo arreglo un poco mas y no darte el coñazo con tanto paso que haga jeje
y aver si lo dejo como kiero y ya t lo enseño GRACIAS MEN
  #11 (permalink)  
Antiguo 17/02/2011, 11:12
Avatar de AhmedRugama  
Fecha de Ingreso: diciembre-2008
Ubicación: Nicaragua
Mensajes: 160
Antigüedad: 9 años
Puntos: 6
Respuesta: Menu despegable

Cita:
Iniciado por inkfusion Ver Mensaje
gracias crack, voi a ver si lo arreglo un poco mas y no darte el coñazo con tanto paso que haga jeje
y aver si lo dejo como kiero y ya t lo enseño GRACIAS MEN
claro de nada :)

Etiquetas: Ninguno
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 05:44.