Foro de elhacker.net

Hola buenas... siguiendo con las funciones del otro post que hice tengo otro problema. En realidad dos problemas.

El primero, es que dependiendo de la configuración de pantalla del PC donde se cargue, el submenú me aparece desplazado. He probado a meter una tabla en la ceda donde se llama al submenú en lugar de usar la capa que he puesto aquí abajo, pero da el mismo resultado. a ver si alguien me puede ayudar a hacer posicionamiento de capas según donde cargue la página, es decir, que la función muestra me calcule la posición donde debe colocar la capa.

Funciones:

<script type="text/javascript">
function muestra(id)
{
	document.getElementById(id).style.visibility='visible';
}
 
function oculta(id)
{
	document.getElementById(id).style.visibility='hidden';
}
</script>

La capa:

<div id="subMenu" class="menu" onMouseOut="javascript:oculta('subMenu');">
    <span class="menu">
       <a href="tintos.html">Vinos tintos</a><br/>
       <a href="blancos.html">Vinos blancos</a><br/>
       <a href="mostos.html">Mostos</a>
    </span>
</div>

Y la celda que llama:

<td width="116" class="menu" onMouseOver="javascript:muestra('subMenu');" >Nuestros vinos</td>

El segundo problema, que no me importa demasiado la verdad, es que cuando añado lo del submenú, todo se descuadra en Internet Explorer (sólo en ese... ''navegador''). Si no pongo lo del submenú, todo vuelve a estar bien.

Gracias a todos, un Saludo.

PD: si alguien me dice las etiquetas para el tag CODE de html y java script edito el mensaje para que salga el codigo como es debido...

Hola, por favor, sube un ejemplo en vivo o muestra capturas para que podamos entenderte mejor.

Las etiquetas respectivas son

[code=html4strict] [/code]  Para HTML.
[code=javascript] [/code]  Para javascript.

Puedes utilizar la lista "GeSHI" que aparece cuando vas a crear un nuevo post.

Saludos

Pues que al pasar el ratón por encima de la celda de "Nuestros vinos" en algunos ordenadores me sale esto:
Y lo que busco es esto, en todos (a veces me lo cuadra bien, a veces no):

Hola, no parece problema de javascript. Podrías poner el CSS que utilizas ?


Saludos

Está entre el head y el body.

<style type="text/css">
#subMenu{
	visibility:hidden;
}
</style>

Ejem ? solo eso ?...

Bueno, tal y como lo veo, con tablas lo vas a tener muy difícil. Sobre todo IE que hace lo que le de la gana. Te recomiendo que uses ul (listas).

Te dejo como quedaría tu menú con ul.

CSS.

<style type="text/css">
   #menuprincipal ul {margin:0px; padding:0px; list-style:none;}
   #menuprincipal ul li {float:left; padding:3px;}
 
   #submenu {display:none; position:fixed;}
   #submenu li a {display:block; _position:absolute; }
   #submenu li {float:none !important;}
</style>

javascript (utiliza display:none; en vez de visibility).

<script type="text/javascript">
   function muestra(id)
      {
         document.getElementById(id).style.display='block';
      }
 
   function oculta(id)
      {
         document.getElementById(id).style.display='none';
      }
</script>

Menu

<div id="menuprincipal">
<ul class="menu">
	<li>La bodega</li>
	<li>Valdepenas</li>
	<li onMouseOver="javascript:muestra('submenu');" onMouseOut="javascript:oculta('submenu');">
		Nuestros vinos
		<ul id="submenu" onMouseOut="javascript:oculta('submenu');">
			<li><a href="#">Vinos tintos</a></li>
			<li><a href="#">Vinos blancos</a></li>
			<li><a href="#">Mostos</a></li>
		</ul>
	</li>
	<li>Visitas y Cartas</li>
	<li>Area infantil</li>
	<li>Dominacion de origen</li>
	<li>Contacto</li>
</ul>
</div>

Ejemplo de como quedaría (click para agrandar):
(http://i.elhacker.net/t?i=z-McyAuQqW44f1xRrnmFhWVo) (http://i.elhacker.net/d?i=z-McyAuQqW44f1xRrnmFhWVo)

Aparte, con ese javascript, te va a ser imposible colocar otro sub-menu puesto que el id se puede declarar solo una vez.

Te recomiendo que mires el código de un compañero ha hecho mas o menos lo mismo pero con jQuery.
-> http://foro.elhacker.net/desarrollo_web/menu_desplegable_html_css_jquery_ayuda-t351067.0.html

Saludos

Sí, sé que es algo triste pero quería empezar por el menú, que es lo único que podía darme problemas... y lo ha hecho XD

Lo que me has pasado tu me hace esto:

Mi idea era hacer una función javascript que tomase la posición del elemento que contiene Nuestros vinos, y dar a subMenú esa posición.

Hola,

Bueno.. Te dejo como obtener la posición de un elemento con jQuery.

Incluir jQuery.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Código javascript que define el horizontal y vertical de #submenu obteniendo datos de #menu

<script type="text/javascript">
$(document).ready(function() {
   // Obtener la posicion del elemento menu(izquierda y arriba)
   var posicion = $('#menu').offset();
   // Poner la misma posicion horizontal.
   $('#submenu').css('left',posicion.left);
   // Poner la misma posicion +20px vertical
   $('#submenu').css('top',posicion.top+20);
});
</script>
 

#submenu debe ser position:relative o fixed

#submenu {position:fixed;}

Saludos

En algunos pc's el menú sale bien y en otros abajo del todo de la página...
No sé cómo algo relativamente sencillo puede dar tanto por el c***. XD

Hola,

En algunos PC's o en otros navegadores ? Hay diferencia.

Saludos

No, no. A mi me funciona bien en Chrome y Firefox (IE ni me he molestado en probar, me imagino lo que va a pasar).

A un amigo es a quien le sale desplazado, usando chrome y firefox.

EDITO: ya sé cual es el problema. Dependiendo de la resolución de pantalla, la parte del menú principal a veces queda muy abajo y la función para calcular la posición se ejecuta al cargar la página. El problema es que hay que bajar el scroll y luego pasar el ratón para llamar a la función, que ha calculado la posición antes de tiempo. Voy a probar una cosa y te digo si funciona.

EDITO2: pues no ha funcionado, he intentado pasar el código de la función que me has puesto a la función muestra:

function muestra(id)
      {
	// Obtener la posicion del elemento menu(izquierda y arriba)
   	var posicion = $('#menu').offset();
   	// Poner la misma posicion horizontal.
   	$('#submenu').css('left',posicion.left);
   	// Poner la misma posicion +20px vertical
  	 $('#submenu').css('top',posicion.top+20);
 
         document.getElementById(id).style.display='block';
      }

Pero sigue haciendo lo mismo.