Menu emergente css con desplazamiento

NaRanJiTo78 · #1 (**permalink**) 19/09/2009, 11:47

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!

Mikmoro · #2 (**permalink**) 19/09/2009, 12:26

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.

NaRanJiTo78 · #3 (**permalink**) 19/09/2009, 13:11

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)?

Mikmoro · #4 (**permalink**) 20/09/2009, 03:26

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.

NaRanJiTo78 · #5 (**permalink**) 21/09/2009, 14:41

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!!!!

NaRanJiTo78 · #6 (**permalink**) 21/09/2009, 15:17

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

Upssssss

NaRanJiTo78 · #7 (**permalink**) 23/09/2009, 11:13

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!!

NaRanJiTo78 · #8 (**permalink**) 23/09/2009, 14:27

Nota: Con IE8 no me pasa, pero si con Firefox - IETab (Supongo que utilizará la version 7)

NaRanJiTo78 · #9 (**permalink**) 24/09/2009, 07:16

Alguien me puede ayudar?

Muchas gracias

Mikmoro · #10 (**permalink**) 25/09/2009, 04:01

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>

<ul>
<li><a href="menu_del_dia.html">Menú del Dia</strong></a></li>
<li><a href="menu_degustacion.html">Menú Degustación</a></li>

<li><a href="menu_vinos.html">Vinos</a></li>
</ul>

</li>

</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.

Mikmoro · #11 (**permalink**) 25/09/2009, 04:09

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.

NaRanJiTo78 · #12 (**permalink**) 25/09/2009, 10:47

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??

Mikmoro · #13 (**permalink**) 25/09/2009, 16:07

¿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>

<ul>
<li><a href="#">Menú Degustacion</a></li>
<li><a href="#">Menú del dia</a></li>
<li><a href="#">Vinos</a></li>
</ul>

</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.

NaRanJiTo78 · #14 (**permalink**) 26/09/2009, 04:50

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!!!

Mikmoro · #15 (**permalink**) 26/09/2009, 10:01

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.

NaRanJiTo78 · #16 (**permalink**) 26/09/2009, 13:35

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

Mikmoro · #17 (**permalink**) 26/09/2009, 14:59

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);
}

NaRanJiTo78 · #18 (**permalink**) 27/09/2009, 06:27

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??

Mikmoro · #19 (**permalink**) 27/09/2009, 08:25

¿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.

NaRanJiTo78 · #20 (**permalink**) 28/09/2009, 13:49

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!!!