DHTML en Firefox

Citar

Escrito el 30 Jun 2007 12:14 pm

Muy buenas a todos, estoy teniendo algunos problemas en Firefox a la hora de programar un menu desplegable con CSS y JavaScript.

He observado (no se si será un defecto particular de mi navegador) que menús desplegables que funcionann a la perfección en mocosoft internet exploder, sencillamente no aparecen en firefox.

Por ejemplo, visiten esta web con ambos navegadores http://www.cbmoratalaz.com; en MIE el menu "Equipos" se abre, y en cambio en Firefox no.

Como soy consciente de que el codigo de esa web es algo complicado, he usado uno sencillisimo:

Código :

<html>
<head>
   <title>Animaci&oacute;n con DHTML</title>
<style type="text/css">
<!--
div.barra { position: absolute; top: 50px; left: 20px; height: 20px; width: 400px; 
font-family: Arial; font-size: 10pt; background-color: silver; layer-background-color:    silver; }
div.menu1 { position: absolute; top: 72px; left: 30px; height: 80px; width: 110px;    visibility: hidden; font-family: Arial; font-size: 10pt; background-color: yellow; 
layer-background-color: yellow; }
div.menu2 { position: absolute; top: 72px; left: 225px; height: 80px; width: 110px;    visibility: hidden; font-family: Arial; font-size: 10pt; background-color: yellow; 
layer-background-color: yellow; }
a:link { text-decoration: none; font-family: arial, helvetica; font-size: 10pt; color:    black; }
a:hover { text-decoration: none; font-family: arial, helvetica; font-size: 10pt; }
a:active { text-decoration: none; font-family: arial, helvetica; font-size: 10pt; color:    black; }
a:visited { text-decoration: none; font-family: arial, helvetica; font-size: 10pt; color:    black; }
//-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function abrir(menu) {
if (document.all) {
document.all[menu].style.visibility="visible";
}
if (document.layers) {
document.layers[menu].visibility="visible";
}
}
function cerrar(menu) {
if (document.all) {
document.all[menu].style.visibility="hidden";
}
if (document.layers) {
document.layers[menu].visibility="hidden";
}
}
//-->
</script>
</head>
<body bgcolor="white">
<h2>Men&uacute; desplegable con DHTML</h2>
<div id="barra" class="barra">&nbsp;&nbsp;&nbsp;
<a href="javascript:abrir('menu1')" onMouseover="abrir('menu1')">Enlaces estupendos</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="javascript:abrir('menu2')" onMouseover="abrir('menu2')">Ciudades interesantes</a>&nbsp;&nbsp;&nbsp;</div>
<div id="menu1" class="menu1">
&nbsp;<a href="http://www.pc-cuadernos.com">PC Cuadernos</a><br />
&nbsp;<a href="http://www.knowwareglobal.com">Knowware</a><br />
&nbsp;<a href="http://es.yahoo.com">Yahoo</a><br />
&nbsp;<a href="http://www.amazon.com">Amazon</a><br />
&nbsp;<a href="javascript:cerrar('menu1')" onMouseout="cerrar('menu1')">Cerrar men&uacute;</a>&nbsp;&nbsp;
</div>
<div id="menu2" class="menu2">
&nbsp;<a href="http://www.bcn.es">Barcelona</a><br />
&nbsp;<a href="http://berlinonline.de">Berlín</a><br />
&nbsp;<a href="http://www.kopenhagen.dk">Copenhague</a><br />
&nbsp;<a href="http://www.newyork.com">Nueva York</a><br />
&nbsp;<a href="javascript:cerrar('menu2')" onMouseout="cerrar('menu2')">Cerrar    men&uacute;</a>&nbsp;&nbsp;
</div>
</body>
</html>

Pero -como habrán podido adivinar- en Firefox no funiona.

¿Alguna idea?

Por Juanlu_001

Claber

690 de clabLevel

6 tutoriales

Envíale un mensaje privado Email Web

@Juanlu001

Citar

Escrito el 30 Jun 2007 01:45 pm

Hola Juanlu, el problema es muy sencillo (aparte de que el sitio que muestras es IE only), no revise todo tu código, pero esto:

Código :

if (document.all) {
document.all[menu].style.visibility="visible";
}
if (document.layers) {
document.layers[menu].visibility="visible";
}

Ya no es muy útil que digamos, en lugar de eso, usa esto

Código :

document.getElementById(menu).style.visibility = 'visible';

Es más estándar, y te evitas los rollos de si es IE, Firefox, Opera, etc. ¿Qué hace? pues ajusta las propiedades de cualquier elemento del documento identificado con la variable menú. Espero te sirva, saludos!

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Bastard Operators From Hell