Ver Mensaje Individual
  #2 (permalink)  
Antiguo 11/05/2003, 08:49
Avatar de KarlanKas
KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años, 2 meses
Puntos: 61
Hola, Hombre Rana!

He mirado lo que quieres y he hecho este menú que espero que te sirva. Funciona perfectamente en IE a partir del 5.5 y en el NS funciona más o menos a partir del 7.0.
Dime si te sirve.

Para crear las opciones de menu es muy sencillo. Vas creándolas en el segundo script de la siguiente manera:

Código PHP:
menu[1]=new nuevo("Opcion del menu","","dirección (si es linkable esa primera opción","titulo del primer submenu","destino del primer submenu","titulo segundo submenu","destino segundo submenu"...); 

Tienes la posibilidad de incluir hasta 6 submenus. Un ejemplo sería:


Código PHP:
menu[1]=new nuevo("Apartados","","Camino Soria","camino.html","Solvencia","solvencia.html","Resquemor","resquemor.html","Destitución","destituir.html"); 
El código sería el siguiente:
Código PHP:
<html>
<
head>
    <
title>Ejemplo sencillo de Menú</title>
<
style>

#contieneMenu{
position:absolute;
top:0px;
left:0px;
}
TD.menu{
background:navy;
color:white;
font:normal 10px/10px verdana;
text-align:center;
width:100px;
padding:5px 10px 5px 10px;
}
A.enlaceMenu{
color:#ffffcc;
font:normal 10px/10px verdana;
text-decoration:none;
}
A.enlaceMenu:HOVER{
color:white;
font:normal 10px/10px verdana;
}

#contieneSubmenu{
position:absolute;
top:22px;
left:-100px;
}
TD.submenu{
background:#ccccdd;
color:white;
font:normal 10px/10px verdana;
text-align:center;
width:118px;
height:20px;
border:solid 1px navy;
padding:0px 0px 0px 0px;
}

A.enlaceSubmenu{
width:100%;
height:100%;
color:#ffffcc;
font:normal 10px/20px verdana;
text-decoration:none;
}
A.enlaceSubmenu:HOVER{
color:white;
font:normal 10px/20px verdana;
background:navy;
}


</
style>

<
script>
var 
menu=new Array();
var 
submenu=new Array();
function 
nuevo(titulo,enlace,submenu1,destino1,submenu2,destino2,submenu3,destino3,submenu4,destino4,submenu5,destino5,submenu6,destino6){
this.titulo=titulo;
this.destino=enlace;
for (
c=1;c<7;c++){
eval(
"if(submenu"+c+"){this.opcion"+c+"=submenu"+c+";this.enlace"+c+"=destino"+c+"}\n else{this.opcion" "='----'}");

}
}

codigo="<table style='position:absolute;top:0px;'><tr>"
function crearMenu(){
        for(
a=0;a<menu.length;a++){
                if (
menu[a].destino){texto="<A class='enlaceMenu' HREF='"+menu[a].destino+"'>"+menu[a].titulo+"</A>";}
                else 
texto=menu[a].titulo;
                
codigo+="<td onmouseover='mostrar("+a+")' class='menu'>"+texto+"</td>";
                
submenu[a]="<table id='"+a+"' >\n"
                
for(b=1;b<7;b++){
                eval(
"if(menu[a].opcion" +"!='----'){submenu[a]+='<tr><td class=\"submenu\"><A class=\"enlaceSubmenu\" HREF=\"'+menu[a].enlace"+b+"+'\">'+ menu[a].opcion"+b+"+ '</A></td></tr>';}");
                
                }
        
submenu[a]+="</table>";
        
        }
        
codigo+="</tr></table>";
        
document.getElementById("contieneMenu").innerHTML=codigo;
}
function 
mostrar(apartado){
document.getElementById("contieneSubmenu").innerHTML=submenu[apartado];
if(
document.all){document.getElementById("contieneSubmenu").style.left=(2+(apartado*120))
}
else{
document.getElementById("contieneSubmenu").style.left=apartado*50}
}
</script>

<script>
menu[0]=new nuevo("inicio","index.html");
menu[1]=new nuevo("Apartados","","Camino Soria","camino.html","Solvencia","solvencia.html","Resquemor","resquemor.html","Destitución","destituir.html");
menu[2]=new nuevo("Contacto","contacto.html","Enviar Email","email.html","Donde estamos","localizacion.html");
menu[3]=new nuevo("KarlanKas","http://www.webareyou.com")
</script>

</head>

<body onload="crearMenu()" >

<div id="contieneMenu"></div>
<div id="contieneSubmenu"  onmouseleave='document.getElementById("contieneSubmenu").style.left="-1000"'></div>
</body>
</html> 

El contenido dentro de las etiquetas <STYLE> y </STYLE>podría meterse en un archivo de texto plano llamado por ejemplo menu.css y llamarlo de la siguiente manera:

<link href="menu.css" rel="stylesheet" type="text/css">

y el contenido del primer SCRIPT podrías meterlo en otro archivo de texto, guardarlo como menu.js y llamarlo así:
<script src="menu.js"></script>

Quedando así:
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<
html>
<
head>
    <
title>Ejemplo sencillo de Menú</title>

<
link href="menu.css" rel="stylesheet" type="text/css">
<
script src="menu.js"></script>
<script>
menu[0]=new nuevo("inicio","index.html");
menu[1]=new nuevo("Apartados","","Camino Soria","camino.html","Solvencia","solvencia.html","Resquemor","resquemor.html","Destitución","destituir.html");
menu[2]=new nuevo("Contacto","contacto.html","Enviar Email","email.html","Donde estamos","localizacion.html");
menu[3]=new nuevo("KarlanKas","http://www.webareyou.com")
</script>

</head>

<body onload="crearMenu()" >

<div id="contieneMenu"></div>
<div id="contieneSubmenu"  onmouseleave='document.getElementById("contieneSubmenu").style.left="-1000"'></div>
</body>
</html> 


Dime si te sirve!!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Última edición por KarlanKas; 11/05/2003 a las 11:15