Mover submenus en un menu dinamico

#1 (**permalink**) 08/06/2003, 10:15

Hola, estoy haciendo un menú dinámico para mi web, pero no puedo colocar los submenús de este menú donde quiero.

Puedo mover el menú principal, pero en ese caso los submenús ya no aparecen donde deberían (bajo su correspondiente opción del menú principal).

Quizás alguien puediera decirme como mover estos submenús, como cambiar sus coordenadas para colocarlos donde necesito.

Un saludo.

#2 (**permalink**) 09/06/2003, 14:22

Hola, no me digáis que esto es tan dificil como me imagino... es que no lo sabe nadie!!!!

Pues vaya, yo que ya me había hecho ilusiones....

Un saludo.

Bravenap · #3 (**permalink**) 09/06/2003, 17:41

Puede que especificando un poco cómo has hecho el menú, ya que hay infinidad de formas, podamos entrar mejor en la cuestión.

Es mi opinión ....

tunait · #4 (**permalink**) 10/06/2003, 04:52

Valdenet,

ayudaría bastante el poder ver cómo tienes hecho ese menú.

Deja el código fuente o un enlace a donde poder verlo

saludos

#5 (**permalink**) 12/06/2003, 17:14

Bueno, aquí os dejo el código, es un poquitín largo, pero no tengo otro lugar donde ponerlo.

<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,des tino2,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").innerHT ML=submenu[apartado];
if(document.all){document.getElementById("contiene Submenu").style.left=(2+(apartado*120))
}
else{document.getElementById("contieneSubmenu").st yle.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","destit uir.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("contieneSub menu").style.left="-1000"'></div>
</body>
</html>

Con este código puedo mover la posición del menú principal pero no de sus submenús. A ver si vosotros podéis hacer algo más.

Un saludo.

P.D.: Este código me lo proporcionó Karlankas, de estos mismos foros.

Bravenap · #6 (**permalink**) 13/06/2003, 01:09

... ¿existe el método onmouseleave?

#7 (**permalink**) 13/06/2003, 16:09

Bueno, la verdad es que yo no soy un experto en Javascript, de hecho el código no es mío, es de Karlankas como ya he dicho en el mensaje anterior.

Lo que si se es que el código funciona perfectamente, así que el método onmouseleave existe, y si buscas un poco en Internet lo encontrarás en alguna web.

Un saludo.

P.D.: Por cierto, hay una línea del código que aparece dividida en 3, si alguien lo va a probar debe unir las 3 líneas en una sola, está al final de la hoja de estilo, al principio del primer script, y está muy bien indicado, solo pongo esto por si acaso....
Me parece que todavía no habéis probado el código porque nadie ha dicho nada.

Bravenap · #8 (**permalink**) 13/06/2003, 16:22

Yo lo he probado y, la verdad, no aparecía absolutamente nada. Tuve cuidado de juntar esas líneas que indicas pero tampoco resultó. Se quedaba siempre totalmente en blanco la página.

Lo del onmouseleave lo decía porque yo pruebo con el Dreamweaver MX y no me salía esa opción para añadir eventos. Creo que lo tengo para compatibilidad con Internet Explorer 6 o superior y por eso me extrañaba no encontrar ese evento. Lo revisaré de todas formas.

un saludo.

#9 (**permalink**) 15/06/2003, 06:34

Hola, creo que el problema está en que al dividir esa línea en 3 se ha separado una palabra en dos, con lo que el navegador no entiende lo que se le quiere decir y por eso no sale nada.

La palabra es "destino2" , y está entre la primera y segunda fila, además entre las palabra "destino5" y "submenu5" , sólo debe haber una coma, sin ningún espacio. Esta palabras están entre la segunda y tercera fila.

Es decir, que debes unir las 3 líneas sin dejar ningún espacio entre ellas.

Espero que ahora funcione, voy a revisarlo yo también para ver si hay algún otro error que se haya podido colar. Si no funciona vuelvo a poner el código entero otra vez.

Saludos.

Bravenap · #10 (**permalink**) 15/06/2003, 11:07

Pues yo sigo sin ver nada de nada. Todo en blanco, ¡vamos!.

JavierB · #11 (**permalink**) 15/06/2003, 13:54

Hola, Valdenet.

Para Internet Explorer tienes que variar la cifra que aparece en rojo:

if(document.all){document.getElementById("contiene Submenu").style.left=(2 +(apartado*120))

Por ejemplo si el menú lo has colocado 100 pixels a la derecha, la cifra tendrá que ser 102

En Netscape creo que habría que hacer algo parecido 2 líneas más abajo pero no lo he conseguido.

Saludos,

#12 (**permalink**) 16/06/2003, 14:45

Muchas gracias JavierB voy a probarlo y te cuento.

En cuanto a tí Bravenap, no sé como estás cogiendo el código para no ver nada, yo lo hago de la siguiente manera, un poco rupestre eso sí:

Copio el código que he puesto en el foro tal cual en un archivo en blanco del bloc de notas de Windows, y luego le doy un nombre al archivo con una extensión html, por ejemplo Menu.html (en la casilla para el nombre escribe esto tal cual, con el punto y todo), al hacer doble click sobre este archivo se vé el menú con sus submenús perfectamente. Comprobado.

Eso sí, sigue las indicaciones de más arriba al pie de la letra, hay que unir las 3 líneas en una sola sin dejar espacios.

Me imagino que funcionará igual si haces esto con Dreamweaver aunque no lo he probado.

Yo tengo el Internet Explorer 5.5.

Un saludo.

Bravenap · #13 (**permalink**) 16/06/2003, 16:18

Ajá, ahora sí. Ya lo he podido ver. El caso es que no sé porqué no me funcionaba con la vista previa de Dreamweaver. Sin embargo si lo guardo con este programa sí que se ve.

Bueno, pues nada, que el menú es muy sencillito pero resultón. Me gusta.

Un saludo a todos.

#14 (**permalink**) 17/06/2003, 17:12

Me alegra que te parezca bonito el menú, pero... ¿sabes como colocar los submenús en la parte de la web que se quiera?

Saludos.

Bravenap · #15 (**permalink**) 18/06/2003, 01:20

Sí bueno, ya casi se me olvidaba que había que buscar una solución

.
Vamos a ver, para empezar he cambiado una línea un poquito para ajustar mejor el submenú, ya que se quedaba un poco desplazado hacia la izquierda.

if(document.all){document.getElementById("contiene Submenu").style.left=(5+(apartado*120))

Creo que con eso irá bien.

Un saludo.

**un ratito después**

Lo que te he dicho antes de HTML funciona pero puede dar fallos. He probado la opción de meter la tabla en una capa con posición absoluta de manera que se pueda meter en cualquier parte de la pantalla. De este modo quedaría así:

<div style="position:absolute; top:-50px; left: 100; z-index:1; width: 100%;">
<table><tr><td><br>
<br>
<br>
</td></tr><TR>
<td><div id="contieneMenu"></div></td></TR></table>

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

Varía lo que está en negrita para dejarlo a tu gusto. Lo de poner el ancho de la capa al 100% (podría ser menos a lo mejor) es porque si no especificas el ancho se te encoge el menú y salen descolocados los submenúes.

Mantén sin embargo el cambio a 5 que te conté antes.

Metiendo el menú en una capa quizás puedas hacer oooooootro script

para que se desplace o aparezca y desaparezca de la pantalla. Pero eso ya es otra historia

.

#16 (**permalink**) 18/06/2003, 16:40

Muchas gracias por vuestra ayuda, voy a probar vuestros códigos.

Gracias de nuevo.

#17 (**permalink**) 21/06/2003, 14:43

Hola, he probado lo que me habéis dicho y funciona perfectamente.

Pero me ha surgido una duda, me he dado cuenta que al variar el siguiente valor (el que he puesto en azul):

if(document.all){document.getElementById("contiene Submenu").style.left=(5 +(apartado*120 ))

los submenús también se desplazan lateralmente, ¿cual es la diferencia entre variar un valor y otro (entre el rojo y el azul)?

Además al darle un valor al ancho de la tabla (la del ejemplo del mensaje anterior que está más arriba, la que contiene la capa donde se encuentra el menú principal) ya no coinciden las opciones del menú principal con sus correspondientes submenús desplegables, ¿como soluciono esto? ¿el valor de ancho de tabla se lo puedo dar en porcentaje o en número de pixeles?

Aún no he probado lo de la capa con posición absoluta porque no lo entiendo. ¿Para que sirve esta línea de código? ¿que diferencia hay entre que la posición de la capa sea absoluta o relativa?

<div style="position:absolute; top:-50px; left: 100 ; z-index:1; width: 100%;">

¿y que significan los valores en negrita?

Muchas gracias por vuestra ayuda. Un saludo a todos.

Bravenap · #18 (**permalink**) 21/06/2003, 14:55

Sólo la última pregunta, de momento.

Los valores en negrita indican la posición de la capa respecto a la parte superior y al lado izquierdo de la página respectivamente. En el caso de que la capa esté contenida en otra será referido a sus bordes.

#19 (**permalink**) 22/06/2003, 06:56

Gracias por tu rápida respuesta, espero impaciente el resto.

Te quiero hacer una pregunta más, parece que controlas mucho de Javascript y CSS, ¿de donde sacas la información?, solamente de tu experiencia como programador o consultas alguna web o manual sobre estos temas.

En este último caso, dime cual por favor, sobre todo si es sencilla de entender porque me gustaría practicar un poco sobre esto, que estoy muy verde

.

Un saludo.

Bravenap · #20 (**permalink**) 22/06/2003, 10:20

Muchas gracias por las alabanzas. Pero eso de que controlo, je je, andas un poco descaminado. ¿Ves los mensajes que tengo enviados en el foro? Pues en comparación con otros eso es una minucia, pero gracias a ellos es como voy aprendiendo cada día. Realmente con la práctica es cómo se van entendiendo las cosas y practicando e intentando cosas.

Sobre los de los tutoriales, bueno, hay infinidad de ellos en internet, puedes usar buscadores o las FAQ para encontrar sitios. Aún así, yo te recomiendo que te pases algún día por la biblioteca de tu barrio y busques algún librito, lo más sencillo posible que haya en la sección de informática. No hace falta que lo leas todo si no tienes mucho tiempo, pero sí al menos los primeros capítulos para entender los fundamentos básicos de este lenguaje. Échale un ojo de vez en cuando por si vienen ejemplos prácticos o algo así, pero no te preocupes por aprenderte todas las funciones y métodos y objetos y.... para eso ya usarás internet. Ya sabes lo que se sule decir, lo importante muchas veces no es saber las cosas sino saber dónde buscarlas.

Pues eso, te animo a que te pases a menudo por los foros (este y otros) y mires los mensajes que se van dejando de vez en cuando. Descubrirás probablemente cosas nuevas cada día y maneras de resolver las cosas que ni siquiera te habías planteado antes.

Un saludo y suerte, que cuando sepas todo lo que hay que saber de Javascript y CSS ya no se usarán este tipo de lenguajes

¡Es una broma!

#21 (**permalink**) 23/06/2003, 12:41

Estoy de acuerdo contigo, el problema es que no tengo tiempo, con el curro y todo eso, además tenía que ver la biblioteca de mi pueblo, que no barrio, que te ibas a echar a llorar.

De todas formas hay muchos tutoriales en internet, eso sí, está la cuestión de imprimirlos (has probado a imprimir 200 o 300 páginas en una hp, para arruinarte).

También estoy de acuerdo en lo último que dices, el consuelo es que el siguiente lenguaje estará basado en los anteriores, y que una vez que conoces bien los fundamentos de uno, prácticamente conoces los de todos, luego solo es cuestión de practicar con el que te interese.

Un saludo.