Foros del Web » Creando para Internet » CSS »

Problema con botonera desplegable

Estas en el tema de Problema con botonera desplegable en el foro de CSS en Foros del Web. Buenos dias!! Bien, he realizado una botonera desplegable siguiendo los ejemplos de mikmoro http://www.araudi.net/Desplegables/m...plegable7.html No encuentor los fallos pero tengo 2 y gordos... uno es ...
  #1 (permalink)  
Antiguo 15/05/2009, 03:06
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Problema con botonera desplegable

Buenos dias!!

Bien, he realizado una botonera desplegable siguiendo los ejemplos de mikmoro http://www.araudi.net/Desplegables/m...plegable7.html

No encuentor los fallos pero tengo 2 y gordos... uno es que al hacer click la botonera no se desplega a no ser que se arrastre un poco el ratón (esto realmente no se porque puede pasar!?), claro que este problema me lo da en firefox pues en explorer directamente se ve todo doblado... creo que el código que he seguido esta igual o casi igual y no se de dónde proviene el problema.

Podéis ver el funcionamiento en www.revesmar.com/menu.html.

Aquí os dejo el código CSS a ver si me podéis echar una mano!!

Código:
#menu{
	text-align:left;
	font-size: 10px;
	width:200px;
	height:450px;
	font-family:Arial, Helvetica, sans-serif;
	background-image:url(../images/fondo_botonera.jpg);
	}
#menu ul {
	list-style:none;
	padding:0;
	border-top:1px #fff solid;
	width:200px;
	}

#menu ul li.nivel1{
	width: 200px;
	}
	
#menu ul li.primera{
	border:none;
	}

#menu ul li a {
	display:block;
	text-decoration:none;
	padding:8px;
	position:relative;
	color:#FFFFFF;
	}
	
#menu ul li span{
	display:block;
	text-decoration:none;
	background-image:url(../images/btn_prin_fndo.jpg);
	position:relative;
	width:200px;
	height:30px;
	border-bottom:1px #fff solid;
	
	}
#menu ul li span a:hover{
	background-image:url(../images/btn_prin_fndo2.jpg);
	width:186px;
	height:14px;
	}
a:active {
	position:relative;
	}
	
#menu ul li a:active {
	position:relative;
	}
	
#menu ul li span.nivel1 {
	display:block;
	margin:0;
	width:200px;
	}
	
#menu ul li:hover span.nivel1{
	cursor:pointer;
	}

#menu ul li ul {
	display:none;
	}
	
#menu ul li a:hover ul, #menu ul li a:active ul{
	display:block;
	position:relative;
	width:186px;	
}

#menu ul li a:link:hover ul{
	display:none;
	}


#menu ul li a:active:hover ul{
	display:block;
	}
#menu ul li a:active:hover ul {
	display:block;
	position:relative;
	width:186px;
	}
	
#menu ul li ul li a{
	width:186px;
	}
#menu ul li ul li a:hover{
	position:relative;
	color:#330000;
	background-image:url(../images/seleccion.png);
	}

#menu ul li ul.primera{
	border-top:none;}
	
table.falsa{
	border-collapse:collapse;
	border:0px;
	float:left;
	position:relative;
	}
	


#menu ul li:focus ul, #menu ul li:active ul, #menu ul li a:active ul {
	display:block;
	position:relative;
	width:186px;
	}


#menu ul li:focus span, #menu ul li:active span, #menu ul li a:active {
	color:white;
	}
Muchísimas gracias!!!!
  #2 (permalink)  
Antiguo 15/05/2009, 07:38
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 539
Antigüedad: 9 años, 3 meses
Puntos: 7
Respuesta: Problema con botonera desplegable

hola IruLaN mira yo tengo un menu casi parecido noce si queres escharle unvistaso
es el que utilise para hacer esta web mira : L2FoxDie

Aki lo puedes descargar

bueno espero que te sirba suerte!!
  #3 (permalink)  
Antiguo 15/05/2009, 12:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con botonera desplegable

Hola, Irulan.
Seguramente no te diste cuenta, pero para que ese menú funcione bien debes mantener esta sección tal cual (aunque puedes editar colores y tamaños, claro) en el header del archivo HTML (entre otras cosas):
Cita:
<style type="text/css">
#menu ul li:focus ul, #menu ul li:active ul, #menu ul li a:active ul {display: block;
position: relative;width: 160px;border: solid 1px #fff;border-top: none;background-color: #6CC;}
#menu ul li:focus span, #menu ul li:active span, #menu ul li a:active {background-color: #6CC;border-bottom: solid 1px #6CC;color: #000;border-left: solid 8px #359BB8;border-right: solid 8px #359BB8;
}
</style>
Se debe a que para que un LI acepte el focus, primero hay que asignarle un tabindex, y luego el focus debe aparecer en el propio HTML, si intentas cargarlo en una CSS externa no funciona bien. No sé exactamente a qué se debe pero sí recuerdo que llegué a esa conclusión después de muchas pruebas.
Revisa el código original y mira a ver si realmente has respetado los tabindex y los estilos del header.
  #4 (permalink)  
Antiguo 17/05/2009, 14:51
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Problema con botonera desplegable

Anda Mikmoro!!

Pues no lo sabía mañana sin falta pruebo a ver si así funciona... la verdad es que no entendía porque estaba el código en el html y no en el css y yo lo puse en el css... ahora ya veo la explicación lógica... ¿que raro no? Bien muchas gracias por tu respuesta y sobretodo por los recursos que nos facilitas!!!

Un saludo!!!
  #5 (permalink)  
Antiguo 17/05/2009, 15:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con botonera desplegable

Cita:
Iniciado por IruLaN Ver Mensaje
la verdad es que no entendía porque estaba el código en el html y no en el css y yo lo puse en el css
Ojo: ese código CSS de la cabecera hay que ponerlo "además" de la hoja de estilo externa enlazada que habías puesto, no "en lugar de".
  #6 (permalink)  
Antiguo 18/05/2009, 03:41
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Problema con botonera desplegable

Pues la verdad, ahora si que no se que es lo que hago mal... sigue sin funcionarme... :(
  #7 (permalink)  
Antiguo 18/05/2009, 04:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con botonera desplegable

Pues dos cosas fundamentales:
1.- no puedes cambiar cosas porque sí sin probarlas inmediatamente y luego preguntarte por qué no funciona; si algo está de una manera suele ser por algo.
2.- la solución es bastante sencilla, comparando el original que sí funciona con el modificado que no funciona.

¿Ves las diferencias por ejemplo en este trozo entre el original:
Cita:
<li class="nivel1 primera" tabindex="1"><span class="nivel1">Opción 1</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
<li><a href="#">Opción 1.2</a></li>
</ul>

<!--[if IE]></td></tr></table></a><![endif]-->
</li>
y el modificado?:
Cita:
<li class="primera" tabindex="1"><span class="nivel1"><a href="index.html">1.HOME</a></span></li>
<!--[if IE]><a href="index.html" class="nivel1ie">1.HOME<table class="falsa"><tr><td><![endif]-->

<li class="primera" tabindex="2"><span class="nivel1"><a href="#">2.EMPRESA</a></span>
<!--[if IE]><a href="#" class="nivel1ie">2.EMPRESA<table class="falsa"><tr><td><![endif]-->

<ul>
<li class="primera"><a href="empresa.html">2.1 Presentación</a></li>
<li><a href="politica.html">2.2 Politica de empresa</a></li>

<li><a href="salud.html">2.3 Salud y seguridad</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
Eliminas una de las clases del LI y añades un enlace (A) que no está en el original, por ejemplo.
  #8 (permalink)  
Antiguo 18/05/2009, 06:16
Avatar de IruLaN  
Fecha de Ingreso: octubre-2005
Ubicación: Sitges, Barcelona.
Mensajes: 413
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Problema con botonera desplegable

Ostras Mikmoro... soy un pequeño desastre... gracias por explicarme tan bien, eres muy atento. Repasaré el código completamente antes de volver a preguntar.

Muchisimas gracias!
  #9 (permalink)  
Antiguo 18/05/2009, 08:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con botonera desplegable

No molestas en absoluto preguntando, IruLaN, pero hago lo que creo que es mejor para ti: debes acostumbrarte por un lado a repasar las cosas al detalle antes de preguntarlas, y por otro lado, como he dicho muchas veces, sobre un código que funciona debes hacer un único cambio y comprobar que ha ocurrido, así si cambias algo vital que hace que deje de funcionar te darás cuenta enseguida.
Sólo un cambio cada vez y comprobación; es mi manera.

P.D.: me alegro de que te tomes bien el pequeño tirón de orejas, porque hay gente que eso lo lleva muy mal. Mi único interés es ayudarte, te lo garantizo.
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




La zona horaria es GMT -6. Ahora son las 00:07.