menu escurridizo

Pilly · #1 (**permalink**) 16/02/2007, 15:45

hola foreros,
hice un sub menú desplegable pero cuando trato de navegar por este se desaparece muy facilmente y es imposible acceder a los links del mismo, porque sucede esto?., les envío el código
Muchas gracias de antemano por toda la ayuda que puedan prestarme
Pilly

Código:

/*Submenú */

#nav2 a{
	display: block;
	margin-bottom: 1px;
}


#nav2 li.active a.topdaddy {
	background: none;
	padding-right: 25px;
}

#nav2 ul ul a.daddy {
	background: none;
}

#nav2 li a {
	background: silver;
}

#nav2 li li a{
	background: Silver;
	font-weight: bold;
	padding: 0;
	text-indent: 0px;
   font-size: 12px;
	width: 185px;
	height: 16px;
	
}

#nav2 ul li a:hover,
#nav2 ul li ul li a:hover,
#nav2 ul li ul li ul li a:hover {
	color: gray;
	
	
}

#nav2, #nav2 ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 250px;
}

#nav2 li li {
	padding: 0;
	background: none;
	border-bottom: 1px solid black;
}

/* top level links */
#nav2 a.topdaddy,

/* sub level links */

#nav2 ul ul a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	width: 250px;
	text-transform: none;
	
}

/* top level buttons */

#nav2 li {
	float: left;
	padding: 0;
   background: none;
   height: 43px;
   

}

#nav2 ul li {
	position: relative;
}

#nav2 li ul {
	top: 3px;
	position: absolute;
	left: -666em;
	height: auto;
	width: 150px;
	font-weight: normal;
	border-width: 0;
	margin: 0;
	padding: 0px;
	border-right: 1px solid Black;
	border-left: 1px solid Black;
	border-bottom: 1px solid Black;
   border-top: 1px solid Black;
	}
	
#nav2 ul {
	padding: 0;
	margin: 0;
	margin-left: 1px;

}

#nav2 li li {
	float: left;
	padding: 0;
   width: 150px;
	height: 16px;
	font-size: 22px;
   border-right: 1px solid Black;
	border-left: 1px solid Black;
	border-bottom: 1px solid Black;
   border-top: 1px solid Black;
}

/* margin for pullouts */
#nav2 li ul ul {
	margin: -31px 0 0 170px;

}


#nav2 li:hover ul ul, 
#nav2 li:hover ul ul ul,
#nav2 li:hover ul ul ul ul,  
#nav2 li.sfhover ul ul, 
#nav2 li.sfhover ul ul ul, 
#nav2 li.sfhover ul ul ul ul {
	left: -666em;
	
	
}

#nav2 li:hover ul, 
#nav2 li li:hover ul, 
#nav2 li li li:hover ul, 
#nav2 li li li li:hover ul,
#nav2 li.sfhover ul, 
#nav2 li li.sfhover ul, 
#nav2 li li li.sfhover ul,
#nav2 li li li li.sfhover ul{
	z-index: 100;
	left: 175px;
		
	
}

#nav2 li:hover, #nav2 li.sfhover {
      left: 0;
}

#nav2 li:hover a, #nav2 li.sfhover a {
    color: black;

}

#nav2 li li:hover a, #nav2 li li.sfhover a {
    color: #ffffff;

}

/* suckerfish */
#nav2 a {
	background: none;
	
}

#nav2 ul ul a {
	background: none;
	color: #ffffff;

}

#nav2 li.active {
	background: none;
	
}

#nav2 li li.active {
	background: none;
	

}

#nav2 li:hover ul, 
#nav2 li li:hover ul, 
#nav2 li li li:hover ul, 
#nav2 li li li li:hover ul,
#nav2 li.sfhover ul, 
#nav2 li li.sfhover ul, 
#nav2 li li li.sfhover ul,
#nav2 li li li li.sfhover ul{
	background: #C7C7C7;

}

/*Submenú 3*/

#nav3 a{
	display: block;
	margin-bottom: 1px;
	
}


#nav3 li.active a.topdaddy {
	background: none;
	padding-right: 25px;
}

#nav3 ul ul a.daddy {
	background: none;
}

#nav3 li a {
	background: none;
}

#nav3 li li a{
	background: Silver;
	font-weight: bold;
	padding: 0;
	text-indent: 0px;
   font-size: 12px;

	
}

#nav3 ul li a:hover,
#nav3 ul li ul li a:hover,
#nav3 ul li ul li ul li a:hover {
	color: Gray;
	
	
}

#nav3, #nav3 ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 250px;
}

#nav3 li li {
	padding: 0;
	background: none;
	border-bottom: 1px solid black;
}

/* top level links */
#nav3 a.topdaddy,

/* sub level links */

#nav3 ul ul a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	width: 250px;
	text-transform: none;
	
}

/* top level buttons */

#nav3 li {
	float: left;
	padding: 0;
   background: none;
   height: 40px;
   

}

#nav3 ul li {
	position: relative;
}

#nav3 li ul {
	top: 45px;
	position: absolute;
	left: -666em;
	height: auto;
	width: 250px;
	font-weight: normal;
	border-width: 0;
	margin: 0;
	padding: 0px;
	border-right: 1px solid Black;
	border-left: 1px solid Black;
	border-bottom: 1px solid Black;
   border-top: 1px solid Black;
	}
	
#nav3 ul {
	padding: 0;
	margin: 0;
	margin-left: 1px;

}

#nav3 li li {
	float: left;
	padding: 0;
   width: 250px;
	height: 16px;
	font-size: 22px;
   border-right: 1px solid Black;
	border-left: 1px solid Black;
	border-bottom: 1px solid Black;
   border-top: 1px solid Black;
}

/* margin for pullouts */
#nav3 li ul ul {
	margin: -31px 0 0 170px;

}


#nav3 li:hover ul ul, 
#nav3 li:hover ul ul ul,
#nav3 li:hover ul ul ul ul,  
#nav3 li.sfhover ul ul, 
#nav3 li.sfhover ul ul ul, 
#nav3 li.sfhover ul ul ul ul {
	left: -666em;
	
	
}

#nav3 li:hover ul, 
#nav3 li li:hover ul, 
#nav3 li li li:hover ul, 
#nav3 li li li li:hover ul,
#nav3 li.sfhover ul, 
#nav3 li li.sfhover ul, 
#nav3 li li li.sfhover ul,
#nav3 li li li li.sfhover ul{
	z-index: 100;
	left: 180px;
		
	
}

#nav3 li:hover, #nav3 li.sfhover {
      left: 0;
}

#nav3 li:hover a, #nav3 li.sfhover a {
    color: black;

}

#nav3 li li:hover a, #nav3 li li.sfhover a {
    color: #ffffff;

}

/* suckerfish */
#nav3 a {
	background: none;
	
}

#nav3 ul ul a {
	background: none;
	color: #ffffff;

}

#nav3 li.active {
	background: none;
	
}

#nav3 li li.active {
	background: none;
	

}

#nav3 li:hover ul, 
#nav3 li li:hover ul, 
#nav3 li li li:hover ul, 
#nav3 li li li li:hover ul,
#nav3 li.sfhover ul, 
#nav3 li li.sfhover ul, 
#nav3 li li li.sfhover ul,
#nav3 li li li li.sfhover ul{
	background: #C7C7C7;

}

Mikmoro · #2 (**permalink**) 18/02/2007, 11:21

Creo que deberías poner el fragmento de código html donde tienes el menú, para que podamos ver a qué corresponde cada clase.

Mikel.

Pilly · #3 (**permalink**) 21/02/2007, 09:29

Hola Mikmoro, este es el código html que me despliega los menus,
Por favor ayudame que solo esto me falta para culminar este proyecto

Código:

<?php 

   function menu() 
   { 
?> 
<script type="text/javascript">
			<!--//--><![CDATA[//><!--
			
			sfHover = function() {
				var sfEls = document.getElementById("nav2").getElementsByTagName("LI");
				for (var i=0; i<sfEls.length; i++) {
					sfEls[i].onmouseover=function() {
						this.className+=" sfhover";
					}
					sfEls[i].onmouseout=function() {
						this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
					}
				}
			}
			if (window.attachEvent) window.attachEvent("onload", sfHover);
			
			//--><!]]>
</script>


<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td height="38"> 
<ul id="nav2">
                <li><a href="quienes.php" id="contentpagetitle" ><img src="images/quienes.jpg" width="196" height="38" border="0" ></a>
                  <ul >
                    <li><a href="historia.php" >HISTORIA DE LA EMPRESA</a></li>
                    <li><a href="politica_calidad.php" >POLITICA DE CALIDAD</a></li>
                                      </ul>
</li></ul>
</td></tr>
<script type="text/javascript">
			<!--//--><![CDATA[//><!--
			
			sfHover = function() {
				var sfEls = document.getElementById("nav3").getElementsByTagName("LI");
				for (var i=0; i<sfEls.length; i++) {
					sfEls[i].onmouseover=function() {
						this.className+=" sfhover";
					}
					sfEls[i].onmouseout=function() {
						this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
					}
				}
			}
			if (window.attachEvent) window.attachEvent("onload", sfHover);
			
			//--><!]]>
</script>

<tr align="left" ><td height="50">
<ul id="nav3">
                <li><a href="servicios.php" id="contentpagetitle" ><img src="images/servicios_b.jpg" width="196" height="38" border="0" ></a>
                  <ul >
                    <li><a href="contamos.php" >CONTAMOS CON</a></li>
                    <li><a href="rastreo.php" >RASTREO SATELITAL</a></li>
                    <li><a href="radio.php" >RADIO FRECUENCIA NACIONAL Y CELULAR</a></li>
                    <li><a href="control.php" >PUESTOS DE CONTROL</a></li>
                    <li><a href="soft_control.php" >OPTIMIZACION Y PLANIFICACION</a></li>

                  </ul>
</li></ul>


</td></tr>
<tr align="left" ><td height="50"><a href="equipos.php" id="mtm_products" ><img src="images/equipos.jpg" width="176" height="38" border="0" ></a></td></tr>
<tr align="left" ><td height="50"><a href="experiencia.php"  id="mtm_services" ><img src="images/experiencia.jpg" width="150" height="39" border="0" ></a></td></tr>
<tr align="left" ><td height="50"><a href="contacto.php" id="mtm_contact_us" ><img src="images/contactanos.jpg" width="144" height="38" border="0" ></a></td></div></tr>
</table>

<?    
   } 
?>

Muchas gracias
Pilly

Mikmoro · #4 (**permalink**) 21/02/2007, 13:05

Hola, Pilly.

Sólo puedo decirte que no veo cuál es el problema; los menus depliegan correctamente y se accede a ellos normalmente.

He copiado tu código en un archivo .html, la hoja de estilo en un css y los he puesto en este servidor para que puedas acceder a él y ver lo que te digo:

http://www.menoslobos.com/mikel/forosdelweb/Pilly.html

Échale un vistazo y dinos cuál es el problema. Quizá al haberlo puesto todo dentro de un html no produce el conflicto que causa lo que dices.

Mikel.

Pilly · #5 (**permalink**) 21/02/2007, 13:50

que chevere eres genial al poner el código en un server, te lo agradezco mucho, el enlace a la página que he desarrollado es www.transbolivariana.com a ver si se te aparece a ti la dificultad de navegar a través del menú, a mi no me dio problema desde tu sevidor, pero desde el enlace que te digo si, es imposible navegar en el menú porque se pierde, no se si tenga que ver con php?, que hago???

Mikmoro · #6 (**permalink**) 21/02/2007, 16:47

Yo diría que el problema lo tienes en el javascript:

sfHover = function() {
var sfEls = document.getElementById("nav2").getElementsByTagNa me("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Si te das cuenta, le dices que afecte a todos los TagName que sean "li" dentro del "id nav2". Como los elementos secundarios que se despliegan también son "li", también les afecta la funcion onmouseout, es decir, que en cuanto te sales de uno el javascript le hace desaparecer.

Una forma de resolverlo un poco es cambiando en tus clases #nav2 a y #nav3 a el margen inferior (de 1px a 0px), en tu hoja de estilo "template_css.css", para que no haya distancia entre ellos, de manera que no lleguen a desaparecer.

#nav2 a{
display: block;
margin-bottom: 0px;
}
#nav3 a{
display: block;
margin-bottom: 0px;
}

No obstante, por aquí hay gente experta con Javascript que igual te aconseja alguna otra cosa mejor que yo para resolverlo.

Mikel.

Pilly · #7 (**permalink**) 22/02/2007, 08:22

muchas gracias Mikmoro, le cambie lo que me recomendaste pero sigue el problema, ahora he diseñado otra páfina con el mismo javaszcript para el menú pero no tengo ese problema, esto ya me esta volviendo loca, no sé que puede ser.
Que debería cambiarle a la función javascript para que no me afecte a todos los li?

Muchas gracias nuevamente
Pilly

El_derby · #8 (**permalink**) 22/02/2007, 08:56

Cita:

Iniciado por Pilly

que chevere eres genial al poner el código en un server, te lo agradezco mucho, el enlace a la página que he desarrollado es www.transbolivariana.com a ver si se te aparece a ti la dificultad de navegar a través del menú, a mi no me dio problema desde tu sevidor, pero desde el enlace que te digo si, es imposible navegar en el menú porque se pierde, no se si tenga que ver con php?, que hago???

es un print screen? porque no puedo ni selecionar el texto

Shade · #9 (**permalink**) 22/02/2007, 09:46

No, si te fijas en el codigo tiene un div puesto ENCIMA del div con el contenido.

Arregla eso Pilly porque sino no podran clickear siquiera en los botones.

El_derby · #10 (**permalink**) 22/02/2007, 10:05

asha, pense que era una captura de pantalla, arreglalo pilly pa ver tu pagina

Pilly · #11 (**permalink**) 22/02/2007, 11:00

A que div te refieres?,

Pilly · #12 (**permalink**) 22/02/2007, 11:06

ya lo encontré chicos, el problema es este comando position: absolute;, con qué puedo reemplazar ese position:absolute porque me da muchos problemas, solo con margenes?

Mikmoro · #13 (**permalink**) 22/02/2007, 17:23

Hola, Pilly.

Yo creo que tenías mucho jaleo en tu css con las posiciones absolutas, los tamaños y demás.

He rehecho tu hoja "custom_css.css", que creo que resuelve casi todos los problemas con firefox y las posiciones absolutas y demás. Pruébala y ya dirás.

Código:

  body { margin: 0px auto;
    padding: 0px;
    background-color: rgb(255, 255, 255);
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    color: rgb(51, 51, 51);
    letter-spacing: 0px;
    width: 780px;
    text-align: center;
    }

  #container { margin: 0pt auto;
    text-align: left;
    background-repeat: no-repeat;
    background-image: url(../images/fondo_new_mod.jpg);
    position: relative;
    width: 780px;
    height: 540px;
    }

  #seperator { background-repeat: no-repeat;
    left: 20px;
    z-index: 3;
    height: 20px;
    }

  #mamboTopModule { margin-bottom: 0px;
    line-height: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
    margin-right: 0px;
    position: relative;
    top: 95px;
    margin-left: 260px;
    }

  #mamboMainBody { padding: 112px 0px 0px 15px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 265px;
    height: 200px;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 12px;
    width: 480px;
    }

  #mamboLeftModule { left: 10px;
    clear: both;
    width: 180px;
    top: 110px;
    position: relative;
    float: left;
    }

  #banners_bottom { padding-top: 30%;
    width: 100%;
    clear: both;
    position: relative;
    }

  #mod_bottom { clear: both;
    position: relative;
    width: 780px;
    margin-left: auto;
    margin-right: auto;
    }

  .servicios { border: 1px solid rgb(107, 169, 253);
    background: rgb(186, 215, 254) url(http://localhost/transbolivariana_new/images/servicios.gif) no-repeat  scroll left top;
    float: right;
    margin-bottom: 10px;
    width: 490px ! important;
    height: 270px;
    }

  .userbox2r { font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 10px;
    font-style: normal;
    padding-top: 12%;
    left: 48%;
    margin-bottom: 10px;
    width: 312px ! important;
    margin-left: 5px;
    height: 150px;
    position: relative;
    }

Mikel.