como acoplar menu javascript en pagina centrada?

makorn · #1 (**permalink**) 20/09/2004, 11:03

Hola !!:.... es primera vez que utilizo un javascript en mi pagina y fue para hacer un menu desplegable ya que no contaba con mucho espacio y tenia muchos enlaces...
El diseño de la pagina es para 1024*768 y esta centrada !!!!.. justo como esta pagina de foros del web !:.. la cosa es esta:
cuando habro la pagina y me la habre sin maximizar me desorganiza este java script ya que no lo tengo sujeto a ningun marco (por que no los uso).. y me hace el mismo desorden cuando se visualiza en 800 * 600...

mi pregunta es... como puedo sujetarlo a cierto lugar en mi pagina ??? puedo sujetarlo a una tabla ??? por ejemplo ? como puedo solucionar este problema ?

Seya · #2 (**permalink**) 21/09/2004, 02:42

Lo desplegable de tu menu es hacia arriba o hacia abajo?? lo digo porque te puedes ahorrar muchos quebraderos de cabeza si lo tienes tipo vertical. De todos modos, una posible solucion sería que tu pagina se redimensionara al maximo en el load y que de alguna manera hicieras dinamica la posicion de tu menu en funcion a las resoluciones posible, pero siempre maximizada (puedes calcular con offsetHeight y offstWidth para los anchos y altos).

Si es vertical, ni siquiera te hace falta que pongas las capas absolutas en el menu, te valdria poner display block o none ...

Salu2!

makorn · #3 (**permalink**) 21/09/2004, 09:39

Hola seya !!
gracias por tu consejo .. y en efecto mi menu es vertical y despliega las opciones hacia abajo. y en realidad, ya habia pensado en buscar una rutina que buscara la resolucion del monitor que abriera la página, y basandome en las coordenadas para cada resolucion maximizar la pantalla y presentar el menu.

pero como veo que casi todo es posible de realizar en javascript pues no dude que hubiera la posiblidad de acoplarlo a cierto parametro de la web, como una tabla o algo....

trabajare en eso pero me gustaria saber si la opcion que busco es posible ya que tendria que crear una decicion por cada resolucion posible y creo que no seria la codificacion correcta.

Seya · #4 (**permalink**) 21/09/2004, 09:45

Si es vertical y despliegas hacia abajo, mi onsejo es que lo metas en un TD, con posicion relativa y las capas de submenu con estilo de display:none, de tal manera que cuando pinches sobre su menu padre pongas a display:block la capa que corresponde a ese submenu, entiendes???

A veces es mas facil hacer las cosas de lo que pensamos ... y aqui no te merece la pena andar con historias de calculos.

Salu2!!

makorn · #5 (**permalink**) 21/09/2004, 10:44

sabes ya habia probado esa opcion y para que me creas y para los que les sirva aqui les dejo el enlace a una pagina donde explica bien como hacer este tipo de menus desplegables.. yo lo intente pero al acoplar la capa al TD de manera relativa segun la explicacion del ejemplo no funciono.. nunca me lo justifico al bordo de la tabla y por mas intentos que hice no lo logre realizar !!

el ejemplo esta aqui

creo que a esto te refieres no ??.. pero la verdad nunca pude realizarlo asi .. por eso recurri a un menu javascript...

saludos

pd. y si a alguien le sale el menu desplegable segun el enlace que di.. le agradeceria nos compartiera el " COMO LO LOGRO "

Seya · #6 (**permalink**) 22/09/2004, 02:07

Código:

<HTML>
<HEAD>
<TITLE>  </TITLE>
<script language="javascript">
	function despliega(id){
		var action = (document.getElementById('submenu'+id).style.display=='none')?true:false;
		if (action){
			document.getElementById('submenu'+id).style.display = 'block';
		}else{
			document.getElementById('submenu'+id).style.display = 'none';
		}
	}
</script>
</HEAD>
<BODY>
<table width="126" height="445" cellpadding="0" cellspacing="0" id="menu">
	<tr>
		<td width="126" height="322" valign="top">
			<div id="title0" class="title" valign="top" style="height:15px;">
				<table border="0" style="background-color:red;" cellpadding="0" cellspacing="0" width="126" height="15">
					<tr><td><a href="#"><img src="imagen" name="pic1" hspace="0" vspace="0" border="0" onMouseOver="this.src = 'img/inicio_over.gif';" onMouseOut="this.src = 'img/inicio.gif';" style="cursor:pointer;height:15px;" alt="Inicio"></a></td></tr>
				</table>
			</div>
			<div id="title1" class="title" valign="top" style="height:15px;">
				<table border="0" style="background-color:red;" cellpadding="0" cellspacing="0" width="126" height="15">
					<tr><td><a href="compania.shtm"><img src="img/compania.gif" name="pic1" hspace="0" vspace="0" border="0" onMouseOver="this.src = 'img/compania_over.gif';" onMouseOut="this.src = 'img/compania.gif';" style="cursor:pointer;height:15px;" alt="Compañia"></a></td></tr>
				</table>
			</div>
			<div id="title2" class="title" valign="top" style="height:15px;">
				<table border="0" cellpadding="0" cellspacing="0" width="126" height="15">
					<tr><td><a href=""><img src="img/infra.gif" name="imagen2" hspace="0" vspace="0" border="0" onMouseOver="this.src = 'img/infra_over.gif';" onMouseOut="this.src = 'img/infra.gif';" style="cursor:pointer" alt="Infraestructuras" onClick="despliega(2);return false;"></a></td></tr>
				</table>
			</div>
			<div id="submenu2" class="submenu" style="padding:0;display:none;"> 
				<table border="0" cellpadding="0" cellspacing="0" width="124">
					<tr> 
						<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="cableado.shtm">Cableado Estructurado</a></td>
					</tr>
					<tr> 
						<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="proyectos.shtm">Proyectos Especiales</a></td>
					</tr>
				</table>
			</div>
			<div id="title3" class="title"><table border="0" cellpadding="0" cellspacing="0" width="126"><tr><td><img src="img/redes.gif" name="pic2" hspace="0" vspace="0" border="0" onMouseOver="this.src = 'img/redes_over.gif';" onMouseOut="this.src = 'img/redes.gif';" style="cursor:pointer" alt="Redes" onClick="despliega(3);return false;"></td></tr></table></div>
			<div id="submenu3" class="submenu" style="valign:top;padding:0;display:none;">
				<table border="0" cellpadding="0" cellspacing="0" width="124">
					<tr>
						<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="redes.shtm"><b>Redes</b></a></td>
					</tr>
					<tr>
						<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="seguridad.shtm">Seguridad</a></td>
					</tr>
					<tr>
						<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="convergencia.shtm">Convergencia</a></td>
					</tr>
					<tr>
						<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="conectividad.shtm">Conectividad</a></td>
					</tr>
					<tr>
						<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="disponibilidad.shtm">Disponibilidad</a></td>
					</tr>
					<tr>
						<td width="146" onMouseOver="this.className='mouseOverSubmenu'" onMouseOut="this.className='mouseOutSubmenu'"><a href="movilidad.shtm">Movilidad</a></td>
					</tr>
				</table>
			</div>
			<div id="title4" class="title"> 
				<table border="0" cellpadding="0" cellspacing="0" width="126">
					<tr> 
						<td><a href="contacto.shtm"><img src="img/contacto.gif" name="pic3" hspace="0" vspace="0" border="0" onMouseOver="this.src = 'img/contacto_over.gif';" onMouseOut="this.src = 'img/contacto.gif';" style="cursor:pointer" alt="Contacto"></a></td>
					</tr>
				</table>
			</div>
		</td>
	</tr>
</table>
</BODY>
</HTML>

En este codigo esta lo que yo digo, existe dentro de una tabla una serie de capas de menu, las id="submenu" son las que no se ven mientras no se pulse sobre su opcion menu padre, que es cuando por medio del script despliega se comprueba el estado de la capa del submenu correspondiente y se despliega o pliega segun corresponda.

A ver si esto te puede ayudar, es muy simple, de verdad, cuanquier cosa, me comentas

makorn · #7 (**permalink**) 22/09/2004, 09:57

Seya este tipo de menu me agrado mucho ehhh !!! esta muy facil y muy entendible, talvez haciendole variaciones pueda lograr esos efectos en los enventos mauseover y su desaparicion cuando el mause se aleje...

pero basicamente lo que yo busco es diferente, ya que este menu debe de ser libre de no respetar imagenes, frames y textos que haya bajo el al abrirse, y creo que el ejemplo que pusiste no puede o si ??? no lo probe bien.

ya tengo el problema solucionado, bueno, no del todo pero obtube mi menu desplegable en Javascript y lo que realice fue esto:
1. que verifique la resulucion de pantalla y dependiendo de la configuracion despliegue en ciertas coordenadas TOP y Left el menu.
2. poner un maximizar pantalla en el load de la pagina para evitar que se vea descuadrado, aunque se que es anti estetico, pero por lo pronto asi solucione mi problema.
NO encontre la forma de anexar el archivo completo por si a alguien le sirviera este menu javascript desplegable pero si alguien lo necesita se lo puedo pasar !!... es facil de configurar.

se aceptan mas comecntarios si alguien puede aportar !!!

quinqui · #8 (**permalink**) 28/12/2004, 14:33

el menú que sale explicado en desarrolloweb a mí sí me funcionó, aunque se me corría cuando se cambiaba el tamaño de la ventana del navegador (resize)...

me encuentro buscando un menú JavaScript como el que explicaste, Seya, así que muchas gracias, lo probaré ahora mismo ^^

saludos

pd: me gustaría saber si lo has hecho tú, Seya, porque de utilizarlo en mi trabajo web actual, pondré los créditos respectivos en el código. tanto si eres tú su creador como que no, me gustaría si me pudieras facilitar esa información. gracias otra vez.