Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Menu desplegable, problema al desplegar

Estas en el tema de Menu desplegable, problema al desplegar en el foro de CSS en Foros del Web. Hola a todos, espero puedan iluminarme un poco ya que no soy muy bueno con css. Maquete este menu esta casi terminado, cuando se despliega ...
  #1 (permalink)  
Antiguo 26/11/2013, 06:00
 
Fecha de Ingreso: septiembre-2011
Mensajes: 12
Antigüedad: 8 años, 1 mes
Puntos: 1
Pregunta Menu desplegable, problema al desplegar

Hola a todos, espero puedan iluminarme un poco ya que no soy muy bueno con css.

Maquete este menu esta casi terminado, cuando se despliega el menu tiene una leve rotacion, con lo cual me quedan espacios vacios, cuando paso el mouse sobre estos espacios el menu tiende a guardarse.

Trate de que el ul que contiene el li quede de fondo para mantenerlo con la propiedad :hover, pero al ser absoluto no se dimensiona.

Código HTML:
<!DOCTYPE html>
<html lang="es">
	<head>
		<title>menu</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<nav>
			<ul>
			   <li>
			   		<a href="#">MUNDO AM</a>
					<ul>
						<li><a href="#">ZONA FANS</a></li>
						<li><a href="#">DESCARGA</a></li>
						<li><a href="#">CONCURSOS</a></li>
						<li><a href="#">BIOGRAFÍA</a></li>
					</ul>
				</li>
				<li >
					<a href="#">GALERÍA</a>
					<ul>
						<li><a href="#">IMÁGENES</a></li>
						<li><a href="#">VIDEOS</a></li>
					</ul>
				</li>
				<li><a href="#">NOTICIAS</a></li>
				<li><a href="#">CONTACTO</a></li>
			</ul>
		</nav>
	</body>
</html> 
Código CSS:
Ver original
  1. *{
  2.     padding: 0;
  3.     margin: 0;
  4.     border: 0;
  5. }
  6.  
  7. body{
  8.     margin:auto;
  9.     width:800px;
  10.     font-family:arial;
  11. }
  12.  
  13. nav ul{
  14.     list-style: none;
  15. }
  16. nav{
  17.     position: relative;
  18. }
  19.  
  20. nav ul li a{
  21.     text-decoration: none;
  22.     display: block;
  23.     text-align: center;
  24.     padding: 10px;
  25.     color: #fff;
  26. }
  27.  
  28. nav > ul > li{
  29.     float: left;
  30.     min-width: 170px;
  31.     background-color: #812669;
  32.     position: relative;
  33. }
  34.  
  35. nav > ul > li + li{
  36.     background-color: #B43491;
  37. }
  38.  
  39. nav > ul > li + li + li{
  40.     background-color: #AD88BB;
  41. }
  42.  
  43. nav > ul > li + li + li + li{
  44.     background-color: #9C75AC;
  45. }
  46.  
  47. nav > ul > li > ul > li{
  48.     min-width: 170px;
  49.     position: absolute;
  50.     top:0px;
  51.     z-index: -1;
  52.     transition: all 300ms ease 0ms;
  53. }
  54.  
  55. nav > ul > li > ul > li + li{
  56.     position: absolute;
  57.     z-index: -2;
  58.     transition: all 300ms ease 100ms;
  59. }
  60.  
  61. nav > ul > li > ul > li + li + li{
  62.     position: absolute;
  63.     z-index: -3;
  64.     transition: all 300ms ease 200ms;
  65. }
  66.  
  67. nav > ul > li > ul > li + li + li + li{
  68.      
  69.     position: absolute;
  70.     z-index: -4;
  71.     transition: all 300ms ease 300ms;
  72. }
  73.  
  74. nav > ul > li > ul > li > a{
  75.     background-color: #EEEEEE;
  76.     color: #812669;
  77. }
  78.  
  79. nav > ul > li > ul > li > a:hover{
  80.     color: #FFF;
  81.     background-color: #812669;
  82. }
  83.  
  84. nav > ul > li:hover > ul > li{
  85.     transition: all 300ms ease 300ms;
  86.     top:45px;
  87. }
  88. nav > ul > li:hover > ul > li + li{
  89.     transition: all 300ms ease 200ms;
  90.     top:90px;
  91. }
  92. nav > ul > li:hover > ul > li + li + li{
  93.     transition: all 300ms ease 100ms;
  94.     top:135px;
  95. }
  96. nav > ul > li:hover > ul > li + li + li + li{
  97.     transition: all 300ms ease 0ms;
  98.     top:180px;
  99. }
  100.  
  101. nav ul ul li a{
  102.     transform: rotate(-2deg);
  103. }
  104.  
  105. nav ul ul li + li a{
  106.     transform: rotate(3deg);
  107. }
  108.  
  109. nav ul ul li + li + li a{
  110.     transform: rotate(-5deg);
  111. }
  112.  
  113. nav ul ul li + li + li + li a{
  114.     transform: rotate(2deg);
  115. }

Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 26/11/2013, 06:50
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 3 meses
Puntos: 2111
Respuesta: Menu desplegable, problema al desplegar

La cuestión pasaría por asignar una altura, pero claro, ¿por qué el uso de la posición absoluta para los elementos de la lista? En realidad no hace falta, pueden ser perfectamente elementos en bloque y así estaría uno debajo del otro.

Selectores como estos:
Código CSS:
Ver original
  1. nav > ul > li > ul > li + li + li + li

Son un poco locos.

Lo mismo te hace algo así:
Código CSS:
Ver original
  1. nav ul ul li:nth-child(4)

Como sólo tienes dos niveles en el menú, te vale hacer simplemente ul ul y luego simplemente seleccionar el cuarto li —o el cuarto hijo que sea un li.
Y lo mismo para los otros casos de abuso de +.

Pero vamos, el problema que tienes es realmente con usar posiciones absolutas. No le veo mucho sentido a usarlas ahí. Puedes crear lo mismo haciendo una transición usando el margen o también translateY().
  #3 (permalink)  
Antiguo 26/11/2013, 06:55
 
Fecha de Ingreso: septiembre-2011
Mensajes: 12
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Menu desplegable, problema al desplegar

Muchas gracias por el dato, no lo conosia, lo voy a aplicar para mejorar el codigo, sobre las posiciones absolutas, las use porque utilizo la propiedad "z-index".

Como el efecto que genera es desplegado, necesitaba usar el top, para que se aplique el transition.
  #4 (permalink)  
Antiguo 26/11/2013, 07:19
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 3 meses
Puntos: 2111
Respuesta: Menu desplegable, problema al desplegar

En realidad z-index lo puedes usar en cualquier elemento cuya posición no sea estática, que es la que por defecto tienen todos los elementos; así que una posición relativa también te servirá.

Igual necesitas cambiar más de una cosilla para que funcione bien cuando cambies a posición relativa los elementos del menú.

Hice una pequeña prueba cambiando lo que te dije y algunas otras cosas: http://codepen.io/pzin/pen/BAufo

No sé si está perfecto en cuanto al tema del movimiento, usé las medidas que tenías tú puestas para usar translateY(), que como verás, en lugar de usarlo al desplegar, realmente lo usé cuando el menú está cerrado. Luego al desplegar se vuelve translateY(0).

A tener en cuenta, que en CodePen usan prefixfree para el tema de los prefijos propietarios.
  #5 (permalink)  
Antiguo 26/11/2013, 07:52
 
Fecha de Ingreso: septiembre-2011
Mensajes: 12
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Menu desplegable, problema al desplegar

Te agradesco mucho, no solo me ayudaste a solucionarlo, sino tambien me introduciste a las etiquetas trasnlateY, y al los selectores :nth-child.

Gracias.

Edit:
Pregunta, al no usar position:absolute en los elementos de las listas, como logras que al desplegarse no te corra todo el layout?

Última edición por legended; 26/11/2013 a las 08:21
  #6 (permalink)  
Antiguo 26/11/2013, 08:40
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 3 meses
Puntos: 2111
Respuesta: Menu desplegable, problema al desplegar

Cita:
Iniciado por legended Ver Mensaje
Pregunta, al no usar position:absolute en los elementos de las listas, como logras que al desplegarse no te corra todo el layout?
Con que nav ul ul tenga la posición absoluta te vale.

Actualicé el código en codepen y añadí eso, algo de texto para ver que no se mueve nada, y añadí un z-index a nav para que el menú la desplegarse quede siempre por encima del resto.
  #7 (permalink)  
Antiguo 26/11/2013, 09:58
 
Fecha de Ingreso: septiembre-2011
Mensajes: 12
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Menu desplegable, problema al desplegar

Te vuelvo a agradecer!

Etiquetas: background, color, desplegable, desplegar, hover, html
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

SíEste tema le ha gustado a 1 personas




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