Foros del Web » Creando para Internet » CSS »

Menu emergente css con desplazamiento

Estas en el tema de Menu emergente css con desplazamiento en el foro de CSS en Foros del Web. Hola! Me gustaría saber si es posible hacer un menu emergente con CSS que desplace, es decir: Supongamos que tenemos, en vertical, los siguientes elementos: ...
  #1 (permalink)  
Antiguo 19/09/2009, 12:47
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Pregunta Menu emergente css con desplazamiento

Hola!

Me gustaría saber si es posible hacer un menu emergente con CSS que desplace, es decir:

Supongamos que tenemos, en vertical, los siguientes elementos:

Inicio
Quienes somos
Productos
Contacto

Que, al pasar por quienes somos, aparezca el menú emergente con otros elementos, y que a su vez, desplace hacia abajo a "Productos" y "Contacto", para que no los tape o se superpongan, o esto solo es posible con javascript?

Gracias, un saludo!
  #2 (permalink)  
Antiguo 19/09/2009, 13:26
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: Menu emergente css con desplazamiento

Se puede pero es muy conflictivo, porque imagina por ejemplo: el primer elemento tiene dentro de él otros tres, luego cuando lo despliegues el segundo elemento bajará 3 posiciones por así decirlo; bien, ahora pasas el ratón por los tres subelementos y todo bien, pero cuando quieras llevar el ratón al segundo elemento de primer nivel, el primero se cerrará, y entonces... ¿dónde está el ratón? a la altura de cuatro puesto más abajo (donde estaba el segundo elemento), y sin embargo, ¿dónde está el segundo elemento? en la segunda posición (de altura), porque el primero se ha cerrado y el segundo ha vuelto a subir a su sitio. ¿Se ve claro?

Pues eso se complica más cuanta más distancia y más subelementos, produciendo unos saltos indeseados y horribles en el menú. No te lo recomiendo de ningua de las maneras.
  #3 (permalink)  
Antiguo 19/09/2009, 14:11
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

Mikmoro, de tus menús CSS (http://www.forosdelweb.com/f53/menu-...miento-736947/)hay alguno en el que se pueda tapar los elementos de abajo del submenu de alguna manera?

Es decir, el menu que tengo actualmente es transparente el fondo, simplemente seria al abrir, que tuviera un fondo clarito, (con apha es posible)?
  #4 (permalink)  
Antiguo 20/09/2009, 04:26
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: Menu emergente css con desplazamiento

Uhmmmm, no te entiendo. ¿Puedes poner el enlace a ese menú para verlo? Los que comentas tienen el fondo sólido, y en general tapan la parte sobre la que caen, excepto con algún flash o así que hay que retocar.
  #5 (permalink)  
Antiguo 21/09/2009, 15:41
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

Lo que no entiendo es el comportamineto siguiente:

Si aqui tengo el menu y nada mas http://www.firenetworks.eu/krachai/12.html funcionando bien, porque aqui me sale descuadrado el submenú

http://www.firenetworks.eu/krachai/menup.html si tienen los mismos elementos??

Muchas gracias por adelantado!!!!
  #6 (permalink)  
Antiguo 21/09/2009, 16:17
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

ahhhhhhhhh perdón, no me di cuanta de que sin querer estaba position:absolute, y era relative!!

Upssssss
  #7 (permalink)  
Antiguo 23/09/2009, 12:13
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

Hola Mikmoro, hay 2 cosas que no entiendo de este menu respecto a los dos exploradores:

He colocado el contenedor del menu en posicion absoluta(y éste está en posicion relativa), y en Firefox se ve como se debe y al ponerte encima puedes ponerte sobre los submenús.

En IE, aparte de no colocarse donde debe (posicion absoluta no fija una posición exacta?)al ponerte encima, sale el submenú, pero al bajar a cualquiera de ellos, desparece.

A que se debe esto?

La página es:

http://www.firenetworks.eu/krachai/menu.html

Un saludo, muchas gracias!!
  #8 (permalink)  
Antiguo 23/09/2009, 15:27
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

Nota: Con IE8 no me pasa, pero si con Firefox - IETab (Supongo que utilizará la version 7)
  #9 (permalink)  
Antiguo 24/09/2009, 08:16
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

Alguien me puede ayudar?

Muchas gracias
  #10 (permalink)  
Antiguo 25/09/2009, 05:01
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: Menu emergente css con desplazamiento

Vayamos por partes:
en primer lugar, no entiendo cómo has hehco el menú, ya que los 4 primeros elementos son divs independientes, y luego el último, el único desplegable, es el único que realmente es un menú.
Luego, mira el código que has puesto:
Cita:
<div id="menu">
<ul>
<li class="nivel1"><a href="menu.html" class="nivel1">La Carta</a>
<!--[if lte IE 6]><a href="menu.html" class="nivel1ie">Opci&oacute;n 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="menu_del_dia.html">Men&uacute; del Dia</strong></a></li>
<li><a href="menu_degustacion.html">Men&uacute; Degustaci&oacute;n</a></li>

<li><a href="menu_vinos.html">Vinos</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
</div>
Cierras dos veces el TD y la tabla para IE6, y dos veces el LI. Primero haz que eso esté bien y luego seguimos.
  #11 (permalink)  
Antiguo 25/09/2009, 05:09
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: Menu emergente css con desplazamiento

Y segundo, mirando ahora mejor tu menú y su CSS: no se puede pretender coger el menú, cambiarlo por completo, no coger correcta o completamente la CSS y que funcione bien.
Te faltan selectores (como el de la tabla falsa, por ejemplo), que puede que hayas quitado por despieste o porque no los considerabas importantes, pero sin ellos el menú no funciona.

Yo creo sinceramente que deberías empezar de nuevo, coger el menú que te interesa y que sabes que funciona, y empezar a modificar las cosas una por una, comprobando cada vez qué es lo que cambia o no, qué sigue funcionando y qué no con cada cambio.

Al menos yo, creo que es todo lo que puedo y debo hacer por ayudarte de momento.
  #12 (permalink)  
Antiguo 25/09/2009, 11:47
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

Muchas gracias Mikmoro por tu disposición a ayudarme!Te lo agradezco mucho!!!

He observado una cosa curiosa, al hacerlo paso por paso:

El menú (Solo quitando las otras 4 opciones, cambiando la letra y quitanto el borde) funciona bien en:

http://www.firenetworks.eu/krachai/prueba.html

Pero, si le quito el color de fondo (En la web que estoy haciendo quiero que el menu sea transparente) ya no funciona en IE:

Cita:
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
padding: 8px;
position: relative;
}
http://www.firenetworks.eu/krachai/prueba3.html

Es esto normal??

Última edición por NaRanJiTo78; 25/09/2009 a las 12:14
  #13 (permalink)  
Antiguo 25/09/2009, 17:07
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: Menu emergente css con desplazamiento

¿Normal? en absoluto, pero es que IE6 hace cosas muy raras e inexplicables. Prueba con este código:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prueba</title>
</head>
<style>
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { background: #366;width: 100%;}
body { font-family: Verdana, Arial, Helvetica, sans-serif;}
#menu {text-align: center;
font-size: 0.7em;
width: 165px;
margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block!important;display: inline-block;
text-decoration: none;
color: #fff;
padding: 8px;
}
#menu ul li a.nivel1ie {width: 160px;padding: 6px 0px 8px 0px;}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;padding-top: 0px!important;padding-top: 6px;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
</style>
<body>
<div id="menu">
<ul>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Menú</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Menú<table class="falsa"><tr><td><![endif]-->
<ul>
<li><a href="#">Menú Degustacion</a></li>
<li><a href="#">Menú del dia</a></li>
<li><a href="#">Vinos</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
Te seguía sobrando un LI, además de otros pequeños errores. Sólo lo he probado en IE6 y FF, así que no sé cómo irá en IE7 y 8.
  #14 (permalink)  
Antiguo 26/09/2009, 05:50
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

Vaya...con un programa muy útil (IE Tester) donde puedes ver las diferentes versiones de IE, funciona en todas las versiones(En IE 5.5 sale a la izquierda y con diferente fuente, pero no creo que haya mucha gente ya con ese navegador) excepto en IE7(el navegador más común actualmente), donde sigue desapareciendo el submenú.

Supongo que no hay ningún parche posible entonces?

Muchas gracias, un saludo!!!
  #15 (permalink)  
Antiguo 26/09/2009, 11:01
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: Menu emergente css con desplazamiento

Podría resolverse añadiendo un background-color: #366; a este selector:
Cita:
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;padding-top: 0px!important;padding-top: 6px;background-color: #366;
}
Pero eso hará que el UL sea opaco y no transparente al ser mostrado. Qierías los botones transparentes, pero no sé si también el deplegable. Como siempre, todo depende de lo que quieres hacer exactamente.
Con todo siempre transparente, con IE es un problema, parece ser.
  #16 (permalink)  
Antiguo 26/09/2009, 14:35
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

Si, Mikmoro, queria todo transparente, pero parece ser que eso no le gusta a IE7...

He intentado urante 5 horas buecar una solucion por internet y webs en ingles de CSS, pero nada...

En fin, veo que voy a tener que usar muy a mi pesar javascript

Muchas gracias por la ayuda prestada!!

Un saludo
  #17 (permalink)  
Antiguo 26/09/2009, 15:59
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: Menu emergente css con desplazamiento

Bueno, no hay que tirar tan pronto la toalla. Prueba añadiendo una imagen falsa de fondo al UL:
Cita:
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;
left: 0px;
padding-top: 0px!important;padding-top: 6px;
background: url(imgagenes/falsa.jpg);
}
  #18 (permalink)  
Antiguo 27/09/2009, 07:27
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

Bien, Mikmoro, tuviste una gran idea, y funciona!!! He aqui la prueba:

http://www.firenetworks.eu/krachai/prueba5.html

El problema llega cuando, al <div#menu> le doy una posición absoluta, para poder colocarlo en una parte especifica de la pantalla(ej. con top y margin-left), entonces ya no funciona.Solo funciona poniendo a éste como relativo.

Me gustaría, por ejemplo que se colocase en {top:350;left:150;}
http://www.firenetworks.eu/krachai/prueba6.html

No hay alguna manera para poder colocar este div en un lugar concreto sin que deje de funcionar??
  #19 (permalink)  
Antiguo 27/09/2009, 09:25
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: Menu emergente css con desplazamiento

¿Se te ocurre que deberías haber planteado todo desde el principio? Mete todo el menú en una caja y colócala donde quieras, así no afectará al propio menú. Échale un poco de imaginación.

Última edición por Mikmoro; 27/09/2009 a las 13:10
  #20 (permalink)  
Antiguo 28/09/2009, 14:49
Avatar de NaRanJiTo78  
Fecha de Ingreso: noviembre-2007
Ubicación: In the BeaCh
Mensajes: 874
Antigüedad: 10 años, 1 mes
Puntos: 10
Respuesta: Menu emergente css con desplazamiento

Lo intenté 1 y mil veces antes de volver a preguntar, Mikmoro, pero en cuanto mueves el menú 1px arriba o abajo o erecha e izquierda con el contenido del menú en otro DIV, ya no funciona.

Que nunca me pongan gas sarín en una mano y al lado a los desarrolladores de IE...(es broma).

Al margen, te agradezco infinitamente la ayuda prestada...Al final,tras horas de intentos fallidos y desesperados,he optado por un menú igual, pero en flash(y en contra de mi voluntad)

Muchas gracias y un saludo!!!
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 09:18.