[SOLUCIONADO] Menu desplegable, problema al desplegar

legended · #1 (**permalink**) 26/11/2013, 06:00

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*{
    padding: 0;
    margin: 0;
    border: 0;
}
 
body{
    margin:auto;
    width:800px;
    font-family:arial;
}
 
nav ul{
    list-style: none;
}
nav{
    position: relative;
}
 
nav ul li a{
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 10px;
    color: #fff;
}
 
nav > ul > li{
    float: left;
    min-width: 170px; 
    background-color: #812669;
    position: relative;
}
 
nav > ul > li + li{
    background-color: #B43491;
}
 
nav > ul > li + li + li{
    background-color: #AD88BB;
}
 
nav > ul > li + li + li + li{
    background-color: #9C75AC;
}
 
nav > ul > li > ul > li{
    min-width: 170px;
    position: absolute;
    top:0px;
    z-index: -1;
    transition: all 300ms ease 0ms;
}
 
nav > ul > li > ul > li + li{
    position: absolute;
    z-index: -2;
    transition: all 300ms ease 100ms;
}
 
nav > ul > li > ul > li + li + li{
    position: absolute;
    z-index: -3;
    transition: all 300ms ease 200ms;
}
 
nav > ul > li > ul > li + li + li + li{
     
    position: absolute;
    z-index: -4;
    transition: all 300ms ease 300ms;
}
 
nav > ul > li > ul > li > a{
    background-color: #EEEEEE;
    color: #812669;
}
 
nav > ul > li > ul > li > a:hover{
    color: #FFF;
    background-color: #812669;
}
 
nav > ul > li:hover > ul > li{
    transition: all 300ms ease 300ms;
    top:45px;
}
nav > ul > li:hover > ul > li + li{
    transition: all 300ms ease 200ms;
    top:90px;
}
nav > ul > li:hover > ul > li + li + li{
    transition: all 300ms ease 100ms;
    top:135px;
}
nav > ul > li:hover > ul > li + li + li + li{
    transition: all 300ms ease 0ms;
    top:180px;
}
 
nav ul ul li a{
    transform: rotate(-2deg);
}
 
nav ul ul li + li a{
    transform: rotate(3deg);
}
 
nav ul ul li + li + li a{
    transform: rotate(-5deg);
}
 
nav ul ul li + li + li + li a{
    transform: rotate(2deg);
}

Muchas gracias de antemano!

pzin · #2 (**permalink**) 26/11/2013, 06:50

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 originalnav > ul > li > ul > li + li + li + li

Son un poco locos.

Lo mismo te hace algo así:

Código CSS:

Ver originalnav 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().

legended · #3 (**permalink**) 26/11/2013, 06:55

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.

pzin · #4 (**permalink**) 26/11/2013, 07:19

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.

legended · #5 (**permalink**) 26/11/2013, 07:52

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?

pzin · #6 (**permalink**) 26/11/2013, 08:40

Cita:

Iniciado por legended

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.

legended · #7 (**permalink**) 26/11/2013, 09:58

Te vuelvo a agradecer!