Foros del Web » Creando para Internet » CSS »

menu escurridizo

 Estas en el tema de menu escurridizo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/02/2007, 15:45
 
Fecha de Ingreso: octubre-2005
Mensajes: 85
Antigüedad: 18 años, 6 meses
Puntos: 0
menu escurridizo
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;

}
  #2 (permalink)  
Antiguo 18/02/2007, 11:21
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: menu escurridizo
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.
  #3 (permalink)  
Antiguo 21/02/2007, 09:29
 
Fecha de Ingreso: octubre-2005
Mensajes: 85
Antigüedad: 18 años, 6 meses
Puntos: 0
Re: menu escurridizo
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
  #4 (permalink)  
Antiguo 21/02/2007, 13:05
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: menu escurridizo
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.
  #5 (permalink)  
Antiguo 21/02/2007, 13:50
 
Fecha de Ingreso: octubre-2005
Mensajes: 85
Antigüedad: 18 años, 6 meses
Puntos: 0
Re: menu escurridizo
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???
  #6 (permalink)  
Antiguo 21/02/2007, 16:47
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: menu escurridizo
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.
  #7 (permalink)  
Antiguo 22/02/2007, 08:22
 
Fecha de Ingreso: octubre-2005
Mensajes: 85
Antigüedad: 18 años, 6 meses
Puntos: 0
Re: menu escurridizo
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
  #8 (permalink)  
Antiguo 22/02/2007, 08:56
Avatar de El_derby  
Fecha de Ingreso: noviembre-2001
Ubicación: Lima Limón
Mensajes: 5.729
Antigüedad: 22 años, 5 meses
Puntos: 43
Re: menu escurridizo
Cita:
Iniciado por Pilly Ver Mensaje
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
__________________
nadie esta libre de decir estupideces, lo malo es decirlas con énfasis
w w w . e l d e r b y w e b . c o m ===============> mi blog de diseño gráfico
  #9 (permalink)  
Antiguo 22/02/2007, 09:46
Avatar de Shade  
Fecha de Ingreso: noviembre-2006
Mensajes: 262
Antigüedad: 17 años, 5 meses
Puntos: 1
Re: menu escurridizo
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.
  #10 (permalink)  
Antiguo 22/02/2007, 10:05
Avatar de El_derby  
Fecha de Ingreso: noviembre-2001
Ubicación: Lima Limón
Mensajes: 5.729
Antigüedad: 22 años, 5 meses
Puntos: 43
Re: menu escurridizo
asha, pense que era una captura de pantalla, arreglalo pilly pa ver tu pagina
__________________
nadie esta libre de decir estupideces, lo malo es decirlas con énfasis
w w w . e l d e r b y w e b . c o m ===============> mi blog de diseño gráfico
  #11 (permalink)  
Antiguo 22/02/2007, 11:00
 
Fecha de Ingreso: octubre-2005
Mensajes: 85
Antigüedad: 18 años, 6 meses
Puntos: 0
Re: menu escurridizo
A que div te refieres?,
  #12 (permalink)  
Antiguo 22/02/2007, 11:06
 
Fecha de Ingreso: octubre-2005
Mensajes: 85
Antigüedad: 18 años, 6 meses
Puntos: 0
Re: menu escurridizo
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?
  #13 (permalink)  
Antiguo 22/02/2007, 17:23
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Re: menu escurridizo
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:48.