Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Menu desplegable con transición

CSS - Menu desplegable con transición

Volver
Nuevo Tema
<<>>
 
Vista:

Menu desplegable con transición

Publicado por Sebs (2 intervenciones) el 15/09/2016 21:41:31
Hola, hice con la ayuda de un video tutorial un menu desplegable, pero cuando se despliegan los sub-menús salen de golpe hay una forma de que salga con una transición o animación? Dejo el css y parte del html
CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
*{padding:0px;
margin:0px;}
 
#header{ margin-left:350px;

		width:1000px;
		font-family:Trebuchet MS;}
ul, ol{list-style:none;}
.nav li a{background-color:#00ABFF;

		  color:#FFFFFF;

		  text-decoration:none;
		  padding:10px 100px;
		  display:block;}
.nav li a:hover{background-color:#FFFFFF;

				color:#00ABFF;

				box-shadow: 5px 5px 5px #D8D8D8;

				webkit-transition: color .9s ;
    			moz-transition: color .9s ease-in-out;
    			o-transition: color .9s ease-in-out;
    			ms-transition: color .9s ease-in-out;
    			transition: color .9s ease-in-out;
				webkit-transition: background-color .9s ease-in-out;
    			moz-transition: background-color .9s ease-in-out;
    			o-transition: background-color .9s ease-in-out;
    			ms-transition: background-color .9s ease-in-out;
    			transition: background-color .9s ease-in-out;}
.nav > li{float:left;}
.nav li ul{display:none;
	       position:absolute;
		   transition-property:opacity;
		   transition-duration: 1s;}
.nav li:hover > ul{display:block;}
.nav li ul li{position:relative;}
.nav li ul li ul{right:-279px;
				 top:0px;}
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="header">
	<ul class="nav">
		<li><a href= "">Inicio</a></li>
		<li><a href= "">Servicio</a>
			<ul>
				<li><a href="#">Ir a pagina 1</a></li>
				<li><a href="">Submenu 2</a></li>
				<li><a href="">Submenu 3</a></li>
				<li><a href="">Submenu 4</a>
				<ul>
					<li><a href="">Submenu 1</a></li>
					<li><a href="">Submenu 2</a></li>
					<li><a href="">Submenu 3</a></li>
					<li><a href="">Submenu 4</a>
					<ul>
						<li><a href="">Submenu 1</a></li>
						<li><a href="">Submenu 2</a></li>
						<li><a href="">Submenu 3</a></li>
						<li><a href="">Submenu 4</a></li>
					</ul>
					</li>
				</ul>
				</li>
			</ul>
		</li>
		<li><a href= "">Contacto</a></li>
	</ul>
</div>
Gracias de antemano.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Menu desplegable con transición

Publicado por xve (490 intervenciones) el 16/09/2016 08:02:10
Hola Sebs para lo que tu quieres hacer, tienes que jugar con el visibility y el transition... mira este ejemplo que te he preparado:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
*{padding:0px;
margin:0px;}
 
#header{ margin-left:350px;

		width:1000px;
		font-family:Trebuchet MS;}
ul, ol{list-style:none;}
.nav li a{background-color:#00ABFF;

		  color:#FFFFFF;

		  text-decoration:none;
		  padding:10px 100px;
		  display:block;}
.nav li a:hover{background-color:#FFFFFF;

				color:#00ABFF;

				box-shadow: 5px 5px 5px #D8D8D8;

				webkit-transition: color .9s ;
    			moz-transition: color .9s ease-in-out;
    			o-transition: color .9s ease-in-out;
    			ms-transition: color .9s ease-in-out;
    			transition: color .9s ease-in-out;
				webkit-transition: background-color .9s ease-in-out;
    			moz-transition: background-color .9s ease-in-out;
    			o-transition: background-color .9s ease-in-out;
    			ms-transition: background-color .9s ease-in-out;
    			transition: background-color .9s ease-in-out;}
.nav > li{float:left;}
.nav li ul{visibility:hidden;
		   opacity:0;
		   transition:visibility 0s,opacity 1s linear;
	       position:absolute;
		   }
.nav li:hover > ul{visibility:visible;opacity:1;}
.nav li ul li{position:relative;}
.nav li ul li ul{right:-279px;top:0px;}
  </style>
</head>
<body>
<div id="header">
	<ul class="nav">
		<li><a href= "">Inicio</a></li>
		<li><a href= "">Servicio</a>
			<ul>
				<li><a href="#">Ir a pagina 1</a></li>
				<li><a href="">Submenu 2</a></li>
				<li><a href="">Submenu 3</a></li>
				<li><a href="">Submenu 4</a>
				<ul>
					<li><a href="">Submenu 1</a></li>
					<li><a href="">Submenu 2</a></li>
					<li><a href="">Submenu 3</a></li>
					<li><a href="">Submenu 4</a>
					<ul>
						<li><a href="">Submenu 1</a></li>
						<li><a href="">Submenu 2</a></li>
						<li><a href="">Submenu 3</a></li>
						<li><a href="">Submenu 4</a></li>
					</ul>
					</li>
				</ul>
				</li>
			</ul>
		</li>
		<li><a href= "">Contacto</a></li>
	</ul>
</div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Menu desplegable con transición

Publicado por Sebs (2 intervenciones) el 16/09/2016 18:02:11
Muchas gracias xve me ha servido.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar