Como hacer un menú en mi pagina??

FrogmaN · #1 (**permalink**) 10/05/2003, 11:23

Quiero hacer un menú que cuando se pase el raton por encima se despliegue acia abajo otro menú secundario. Pongo como ejemplo esta pagina: www.elotrolado.net
El menú que quiero es como el que aparece en esa pagina.

Ta lego y gracias

KarlanKas · #2 (**permalink**) 11/05/2003, 08:49

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" + c + "='----'}");

 
}

}

 
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" + b +"!='----'){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!!

FrogmaN · #3 (**permalink**) 11/05/2003, 11:17

Gracias por la información, a ver si me aclaro, porque en esto estoy bastante verde.

Al final se me quedarian 3 archivos:

menu.css (que creo que es el de los estilos) que contiene el siguiente codigo:

Código PHP:

  <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:bold 10px/10px verdana;

}

 
#contieneSubmenu{

position:absolute;

top:23px;

left:-100px;

}

TD.submenu{

background:#ccccdd;

color:white;

font:normal 10px/10px verdana;

text-align:center;

width:100px;

padding:3px 10px 3px 10px;

border:solid 1px navy;

}

A.enlaceSubmenu{

color:#ffffcc;

font:normal 10px/10px verdana;

text-decoration:none;

}

A.enlaceSubmenu:HOVER{

color:white;

font:bold 10px/10px verdana;

}

 
 
</style>

Otro archivo que se llama menu.js con este codigo:

Código PHP:

  <script>

var menu=new Array();

var submenu=new Array();

function  nuevo(titulo,enlace,submenu1,destino1,submenu2,des tino2,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" + c + "='----'}");

 
}

}

 
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" + b +"!='----'){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>

Y otro que se llame loquequiera.php con este codigo:

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>

Para saber si funciona tendre que subirlo al server no?? en mi pc no se puede probar?

Ta lego y muxas gracias, voy manos a la obra a ver que tal queda

KarlanKas · #4 (**permalink**) 11/05/2003, 11:27

Eso es, lo divides en 3 archivos. Pero a los 2 primeros quítales las etiquetas de <style></style> (en el primero) y <script></script> (en el segundo). Y guarda los tres archivos en el mismo directorio.

Puedes probarlo en tu ordenador, pero cambiale la extensión de php a html para que no tengas ningún problema.

Dime si te va bien.

FrogmaN · #5 (**permalink**) 11/05/2003, 12:04

Lo acabo de hacer así, le he quitao las etiquetas <estile></estile> y <script></script>, tambien le he cambiao la extesion php por html. El archivo html solo contiene el codigo que me has dixo. Le doy a abrir y me sale todo blanco. Los archivos los he creado con el notepad de windows para evitar errores y creo que están bien creados. Voy a probar en el server a ver que tal.

Muxas gracias.

KarlanKas · #6 (**permalink**) 11/05/2003, 12:08

Mira, si te da problemas copia el código sin dividirlo en archivos y pégalo en un solo archivo html y ya está!

O mejor Pincha aquí para verlo!!

FrogmaN · #7 (**permalink**) 11/05/2003, 12:23

He copiao el codigo tal cual, el primero, pero igual. Estoy haciendo algo mal seguro. Pero no se que puede ser.

El menú es como lo quiero, ahora falta que me funcione a mi tambien.

Muxas gracias de nuevo.

KarlanKas · #8 (**permalink**) 11/05/2003, 12:28

Creo que sé donde está el fallo: EN la línea 66, caracter 62 hay un espacio:

Código PHP:

  ...submenu2,[B]des tino2[/B],submenu3,...

Quítalo y déjalo así:

Código PHP:

  ...submenu2,destino2,submenu3,...

O si lo prefieres cópialo de aquí:

FrogmaN · #9 (**permalink**) 11/05/2003, 12:28

Ya funciona, por fin, en tu enlace le he dao a ver codigo fuente y luego lo he guardao en mi pc. Ahora si va.

Voy ha modifiacalo y a ver que tal me queda.

Perdona por las molestias y muxas gracias.

KarlanKas · #10 (**permalink**) 11/05/2003, 12:28

Encantado de ayudarte!!

FrogmaN · #11 (**permalink**) 11/05/2003, 13:10

Perdona, otra duda más quiero meter el menú en una tabla. Estoy provando pero el menú no se mueve de donde está.

Esta va ha ser la pagina donde va el menú: Pelucos

El menú irá debajo de la imagen, en una celda. ¿Como lo ago para meter el menú hay? ¿Que parte del script tengo que mover para que el menú se ponga donde yo quiera?

Muxas gracias.

KarlanKas · #12 (**permalink**) 11/05/2003, 13:24

Imposible ayudarte. No se carga la página....

FrogmaN · #13 (**permalink**) 11/05/2003, 13:31

Es cierto, no se porque hoy no me va. Es lo que tienen los server gratis.

Lo que quiero hacer es mas o menos como en la pagina que te puse arriba, www.elotrolado.net

El encabezado con una imagen y abajo el menú introducido en una tabla.

KarlanKas · #14 (**permalink**) 11/05/2003, 13:36

Prueba con esto. Básicamente he cambiado la posición de los <DIV> contenedores de los menus de absolute a relative. Sólo tienes que meter el <div id="contieneMenu"></div> dentro de la celda que quieras.

Código PHP:

  <html>

<head>

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

<style>

#contieneMenu{

position:RELATIVE;

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:relative;

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();

//OJO LO DE ABAJO DEBE QUEDAR EN UNA LINEA!!!!vvvvvvvvvvvvvvv

function nuevo(titulo,enlace,submenu1,destino1,submenu2,destino2,submenu3,destino3,submenu4,destino4,submenu5,destino5,submenu6,destino6){

//OJO LO DE ARRIBA DEBE QUEDAR EN UNA LINEA  ^^^^^^^^^^^^^^

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" + c + "='----'}");

 
}

}

 
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" + b +"!='----'){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()" >

<table><tr><td><br>

<br>

<br>

</td></tr><TR>

<td><div id="contieneMenu"></div></td></TR></table>

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

</body>

</html>

FrogmaN · #15 (**permalink**) 11/05/2003, 13:57

Ok

Funciona a la perfección.

Con gente como tu da gusto navegar

Ta lego y muchas gracias

KarlanKas · #16 (**permalink**) 11/05/2003, 17:30

De nada, hombre!!!
Hoy por tí y mañana por mi!

FrogmaN · #17 (**permalink**) 12/05/2003, 10:11

Siento molestar otra vez.

El menú no me queda bien. Mira: Pelucos (Hoy parece que si va)

El problema es que el encabezado del menú se superpone sobre el texto o imagenes que tiene la pagina y los submenus hacen que se desplace el contenido de la pagina hacia abajo al desplegarse.

Lo que querria hacer es que el encabezado del menú ocupe su sitio (sin meterse nada debajo) y el submenú se superponga al contenido de la pagina (sin desplazarlo hacia abajo)

No sabia que esto pudiera ser tan lio.

Lo primero he conseguio arreglarlo (el menú ya no se pone encima del texto).

Lo segundo no consigo arreglarlo, el texto sigue desplazandose cuando se abre el submenú. Esto ya supera mis excasos conocimientos.

Ta lego y gracias

FrogmaN · #18 (**permalink**) 14/05/2003, 02:26

Esto lo pongo para situar el hilo un poco mejor, que ya iva por la 3ª pagina.

A ver si alguien puede ayudarme. Ta lego

#19 (**permalink**) 14/05/2003, 18:33

Hola, podrías ayudarme a mí también, tengo un problema parecido con los menús desplegables o dinámicos. He visitado varios tutoriales pero no se como adaptarlos a mi web.

La web es:

http://www.valdetorres.com

Una vez pasada la presentación, en la página principal quiero convertir los 2 menús que hay en dinámicos, concretamente el de la tabla de menus de la izquierda, así como las 2 líneas de enlaces que hay justo encima y debajo del logo de la web.
Pero no tengo ni idea como.

Saludos.

#20 (**permalink**) 16/05/2003, 11:28

Hola, he probado tú menú KarlanKas, a mí me funciona perfectamente, no he tendio el problema de FrogmaN.

A pesar de ello hay 2 pequeños detalles que me gustaría solucionar:

A) Independientemente de donde coloque la capa de los Submenús, siempre aparecen en el mismo sitio en el navegador.
Que puedo hacer para integrar este código en mi web para que aparezcan los menús y subménús donde yo quiero, coincidiendo además entre ellos .

B) ¿Como puedo adaptar las características del menú (fuente, tamaño y color de letra, fondo y bordes de las celdas, etc...) a las de mi web?. Tengo una ligera idea de como se hace, pero no me vendría mal un poquito de ayuda.

Un saludo y muchas gracias.

FrogmaN · #21 (**permalink**) 17/05/2003, 05:10

Hola Valdenet:

Por lo que has mencionado en el ultimo post he deducido que has cogido el primer codigo que puso KarlanKas.

Para Poder poner tu donde quieras el menú tienes que cambiar entre las etiquetas <style></style> del meún la plabra ABSOLUTE por RELATIVE. Te quedaria así:

Código PHP:

  <style>

#contieneMenu{

position:RELATIVE;

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>

Pero cambialo solo despues de "ContieneMenu" que es el que se refiere al meú principal. Si lo cambias despues de "ContineSubmenu" tendras el error que tengo yo.

Respecto al estilo del menú:

background:navy; Esto cambia el fondo, sutitulle navy por el color que quieras (#FFFFCC, o white, etc)

font:normal 10px/10px verdana; Normal se refiere al estilo de la fuente (negrita, cursiva...) 10px/10px (tamaño en pixeles) verdana (tipo de fuente)

border:solid 1px navy; Esto para el borde, solid es el tipo, 1px el grosor y navy el color.

Modifica los datos como más te guste y ya ta.

#22 (**permalink**) 17/05/2003, 08:32

Muchas gracias, voy a probarlo y te cuento...

¿que tal va tu web? ¿ya has conseguido mantener fijos tus menús?

Por cierto, me uno a tu lema, yo también soy novato y me está costando más de lo que pensé en un primer momento. Aunque creo que tú ya has superado la fase inicial y vas por buen camino.

Saludos.

KarlanKas · #23 (**permalink**) 17/05/2003, 08:45

Hola!

Siento el abandono al cual te tengo sometido Hombre rana!! Ahora mismo me pongo a ello.

Hola Valdenet. Si las indicaciones que -tan acertadamente- te ha dado FrogMan te son suficientes fenomenal, si tienes más dudas aquí estoy...

En seguida os digo algo!

FrogmaN · #24 (**permalink**) 17/05/2003, 11:00

El problema que tenia ya esta resuelto (el de que cuando aparecia el submenu este me desplazaba el texto), lo he arreglado cambiando RELATIVE por ABSOLUTE en esta parte del codigo (asi es como queda):

Código PHP:

  #contieneSubmenu{

position:absolute;

top:100px;

left:-100px;

}

Pero al cambiar eso aparece otro problema, el submenú no me queda centrado con el menu, me aparece desplazado como unos 20px acia la izquierda (tambien me aparecia muy arriba, pero eso lo he arreglado poniendo "top:100px;") Se supone que se centra cambiando el valor en "left:-100px;" pero ponga el numero que ponga el submenu no se desplaza lateralmente.

No lo he subido a la pagina para que lo veais porque no me deja conectarme el server de tripod desde anoche (se ve que tienen que tener algun problema). Pero creo que me he explicado bien.

A ver quien me puede decir com desplazar este submenu hacia la derecha manteniendo la posicion absolute.

PD: No pasa nada KarlanKas, tu ausencia ha hecho qe pruebe cosas nuevas y he aprendido bastante estos dias y en parte gracias a ti.

Ta lego y gracias

#25 (**permalink**) 18/05/2003, 10:16

Hola, estoy hecho un lío, cuando creía que estaba progresando estoy peor que al principio.

No consigo situar los menús en la parte de la página que yo quiero.

El Menú principal aparece en la parte más alta de la web, independientemente de lo que yo haga.

Los Submenús si los puedo mover más arriba o abajo, moviendo la capa que los contiene, pero no puedo moverlos de izquierda a derecha y también tengo el problema de Frogman, porque también tengo un pequeño desplazamiento de los submenús hacia la derecha.

La verdad es que no tengo ni idea de los estilos CSS, ¿conocéis alguna web donde lo expliquen desde 0? una que uséis vosotros y sea de verdad útil ok? si no conocéis ninguna no pasa nada (pero no busquéis una cualquiera para decírmela, suelen ser muy malas las que se encuentran así).

Saludos.

FrogmaN · #26 (**permalink**) 18/05/2003, 10:29

Para poder poner el menú donde quieras te creas una tabla, y en la celda donde quieras meter el menú colocas esto <div id="contieneMenu"> (este codigo es el que va entre las etiquetas <body></body>)

Un ejemplo puede ser este:

Código PHP:

  <body onload="crearMenu()" >

<table><tr><td><br>

<br>

<br>

</td></tr><TR>

<td><div id="contieneMenu"></div></td></TR></table>

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

</body>

</html>

El problema del centraje del submenu no lo he conseguio arreglar aun. A ver si alguien nos exa una mano.

Ta lego.

#27 (**permalink**) 19/05/2003, 17:12

Hola FrogmaN, lo que me dices ya lo he probado, pero no he tenido resultado.

Lo raro es que al principio si me salía. En Dreamweaver se veían 2 capas, una para el menú principal y otra para los Submenús, y podía mover las 2, y los menús se colocaban donde yo quería.

A pesar de ello no he podido mover lateralmente los submenús (si pude hacerlo con el menú principal, pero ni idea de como lo hice).

¿se te ocurre algo? ¿que estoy haciendo mal ahora?.

De cualquier forma volveré a intentarlo.

Suerte con los submenús.

Un saludo.

FrogmaN · #28 (**permalink**) 20/05/2003, 16:04

Para mover el menu principal lateralmente es cambiando el valor en left:100px; esto en esta parte del codigo.

Código PHP:

  #contieneMenu{

position:RELATIVE;

top:0px;

left:0px;

}

Lo de no poder mover el submenú es por la posicion ABSOLUTE, as estar en absolute solo lo puedes desplazar modificando el top o el left en esta parte del codigo:

Código PHP:

  #contieneSubmenu{

position:absolute;

top:100px;

left:-100px;

}

Pero como ya dige en un mensaje anterior aunque varies el valor del left el submenú no se mueve. (eso ya no se porque) Yo ya desistí. Me estoy buscando otro. Si encuentro uno ya te cuento.

Ta lego

zink · #29 (**permalink**) 20/05/2003, 18:23

Les comento que yo tambien me interesé por el menu...pero se me hizo un poco complicado moverlo a mi gusto...justo lo que dicen ustedes.

en scriptmaster consegui este codigo se los paso. Lo prueban y me dicen que tal. A mi meparecio bien.... solo que no estoy seguro si funcioe con todas las resoluciones de pantalla tal vez hay que hacer diferentes menu para cada resolucion.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script>
var left_corner_x =220; // x-coordinate of top left corner of dropdown menu
var left_corner_y = 37; // y-coordinate of top left corner of dropdown menu
var back_color = '#E6E6E6'; // the background color of dropdown menu
var border_color = 'black'; // the color of dropdown menu border
var border_size = '1'; // the width of dropdown menu border
var menu_width = '121'; // the width of dropdown menu
//// Don't change these parameters
var delay = 500; /////
var active_layer_id = -1; /////
var on_layer_id = -1; /////
var buff_id = -1; /////
/// ----------------------------
//Script developed by Alexey
//for support visit http://www.geocities.com/menulite
//submitted to A1 JavaScripts - www.a1javascripts.com
// menu content; the dropdown menus themselfs between '' and items of every dropdown menu are diveded by |;
//

menu_content = new Array ('<a href=http://www.forosdelweb.com/ class=subMenu>link 1</a> | <a href=http://www.forosdelweb.com/ class=subMenu>Link 2</a>',

'<a href=http://www.forosdelweb.com class=subMenu>link</a> | <a href=http://www.forosdelweb.com class=subMenu>link</a> | <a href=http://www.forosdelweb.com class=subMenu>link</a>',

'<a href=http://www.forosdelweb.com/ class=subMenu>link</a> | <a href=http://www.forosdelweb.com/ class=subMenu>link</a>',

'<a href=http://www.forosdelweb.com/ class=subMenu>link x</a> | <a href=http://www.forosdelweb.com/ class=subMenu>link y</a>');

</script>

<style>
a.topMenu
{
color: black;
font-family: Verdana, Arial, Helvetica;
font-size: 9pt; text-decoration: none;
font-weight: bold;
}
a.topMenu:hover
{
color: red;
}
a.subMenu
{
color: black;
font-family: Verdana, Arial, Helvetica;
font-size: 9pt;
text-decoration: none;
}
a.subMenu:hover
{
color: red;
}
a.Mail
{
color: #FF6633;
font-family: Verdana, Arial, Helvetica; font-size: 8pt;
}
a.Mail:hover
{
text-decoration:none;
}
</style>

<title>menu</title>

<script>
//Script developed by Alexey
//for support visit http://www.geocities.com/menulite
//submitted to A1 JavaScripts - www.a1javascripts.com
// check browser version

NS4 = (document.layers) ? 1 : 0;

function layer_enter (id)

{

on_layer_id = id;

}

function layer_exit (id)

{

on_layer_id = - 1;

setTimeout ('hide('+ id +')', delay/5);

}

function menu_enter (id)

{

if (buff_id >= 0)

hide (buff_id);

show (id);

active_layer_id = id;

}

function menu_exit (id)

{

setTimeout ('hide('+ id +')', delay);

buff_id = active_layer_id;

active_layer_id = -1;

}

function show (id)

{

if (!NS4)

document.all['Menu' + id].style.visibility = "visible";

else

document.layers[id].visibility = "visible";

}

function hide (id)

{

if (active_layer_id != id && on_layer_id != id)

{

if (!NS4)

document.all['Menu' + id].style.visibility = "hidden";

else

document.layers[id].visibility = "hide";

}

}

function generate_layers ()

{

for (i = 0; i < menu_content.length; i++)

{

if (!NS4)

layer_header = '<div id=Menu' + i +

' onMouseOver="layer_enter (' + i + ');" onMouseOut = "layer_exit (' + i + ');"' +

' style="visibility: hidden; position: absolute; left: ' + (left_corner_x + menu_width*i) +

'; top: ' + left_corner_y + ';">';

else

layer_header = '<layer id=' + i +

' onMouseOver="layer_enter (' + i + ');" onMouseOut = "layer_exit (' + i + ');"' +

' visibility=hide left=' + (left_corner_x + menu_width*i) +

' top = ' + left_corner_y + '>';

layer_header += '<table width=' + menu_width + ' cellpadding=0 cellspacing=0 border=0>' +

'<td bgcolor=' + border_color + '><table width=' + menu_width + ' cellpadding=3 ' +

'cellspacing=' + border_size + ' border=0><td width=' + menu_width + ' bgcolor=' + back_color + '>';

elements = menu_content[i].split (/\s*\|\s*/);

layer_body = '';

for (j = 0; j < elements.length; j++)

{

layer_body += elements[j];

if ((NS4 && j < elements.length - 1) || (!NS4 && j < elements.length - 1))

layer_body += '<hr width=' + (menu_width - 8) + ' size=1 color='+ border_color + '>';

}

layer_footer = '</td></table></td></table>';

if (!NS4)

layer_footer += '</div>';

else

layer_footer += '</layer>';

document.writeln (layer_header + layer_body + layer_footer);

}

}

generate_layers ();

</script>

<base target="principal">

</head>

<body bgcolor="#006FA4">

<div align="center">
<center>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="456" >
<tr>

<td ALIGN=CENTER VALIGN=CENTER HEIGHT="20" BGCOLOR="#000000" width="485">

<table BORDER=0 CELLPADDING=0 WIDTH="485" >
<tr>
<td ALIGN=CENTER VALIGN=CENTER WIDTH="120" HEIGHT="20" BGCOLOR="#FFCC00"><a href="/menulite/" onMouseOver="menu_enter (0);" onMouseOut="menu_exit (0);" class="topMenu">Inicio</a></td>

<td ALIGN=CENTER VALIGN=CENTER WIDTH="120" BGCOLOR="#FFCC00"><a href="/menulite/" onMouseOver="menu_enter (1);" onMouseOut="menu_exit (1);" class="topMenu">Diagrama</a></td>

<td ALIGN=CENTER VALIGN=CENTER WIDTH="120" BGCOLOR="#FFCC00"><a href="/menulite/" onMouseOver="menu_enter (2);" onMouseOut="menu_exit (2);" class="topMenu">Catálogo</a></td>

<td ALIGN=CENTER VALIGN=CENTER WIDTH="120" BGCOLOR="#FFCC00"><a href="/menulite/" onMouseOver="menu_enter (3);" onMouseOut="menu_exit (3);" class="topMenu">Formato</a></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</div>

</body>

</html>

suerte

#30 (**permalink**) 25/05/2003, 07:47

Muchas gracias Zink por tu ayuda. Siento no haberte podido contestar antes, pero es que entre semana ahora estoy muy liado y no puedo visitar los foros del web.

No he tenido tiempo de probar el código que nos has proporcionado, pero voy a hacerlo en cuanto pueda y te digo algo.

Un saludo.