PHP - animar el height de mi menu acordeon

   
Vista:

animar el height de mi menu acordeon

Publicado por nacho (14 intervenciones) el 15/08/2014 11:48:08
Hola buenas. Tengo un menu acordeon. con el Height: Auto. Y va como demasiado deprisa. Me gustaria que hiciera el height poco a poco y a auto. Os paso un poco de codigo:

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
#acordeon {
	width: 230px;
	margin:5px auto auto auto;
    align: Left;
}
 
#acordeon .item {
	width: 230px;
	overflow: hidden;
	color: #000000;
	height:15px;
	font-size:11px;
	font-family: helvetica;
	cursor: pointer;
	margin-bottom: 3px;
	text-align: center;
	vertical-align: middle;
	}
 
#acordeon .polo a {
	text-decoration:none; font-family: helvetica;
	font-size: 10px;
	text-aling: center;
	color:#ffffff;
	background: #87e0fd; /* Old browsers */
	background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
 
	font-size:10px;
	cursor: pointer;
}
 
#acordeon .item a {
	text-decoration: none;
	border-radius: 10px;
	color:#000000;
	display: block;
	width:230px;
	height: 15px;
	vertical-align: middle;
	background: #99b6dd; /* Old browsers */
	background: -moz-linear-gradient(top,  #99b6dd 1%, #eff7fc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#99b6dd), color-stop(100%,#eff7fc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #99b6dd 1%,#eff7fc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99b6dd', endColorstr='#eff7fc',GradientType=0 ); /* IE6-9 */
	margin-bottom:5px;
}
 .clearing{
      clear:both;
   }
 
#acordeon .item:hover{
 
    height:auto;
}
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

animar el height de mi menu acordeon

Publicado por xve (5513 intervenciones) el 15/08/2014 19:58:42
Hola Nacho, nos puedes mostrar la parte del código HTML para poder hacer la prueba?
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

animar el height de mi menu acordeon

Publicado por nacho (14 intervenciones) el 08/09/2014 22:19:19
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
<?php
$Categoria1 = str_replace("-", " ",$_GET['Categoria1']);
$Categoria2 = str_replace("-", " ",$_GET['Categoria2']);
 
function left($string, $count){
   return substr($string, 0, $count);
}
 
echo "<div id='acordeon'><div id='acordeon'>";
$Lis=mysql_query("SELECT Categoria1,Categoria2 from articulos group by Categoria1,Categoria2");
 
 
while($pro = mysql_fetch_array($Lis)) {
	if ($ulti==$pro['Categoria1'])
		{
			$z=$z+1;
 
			echo "<p style='height:17px; margin:0;'><a onmouseover='javascript: esperar(1)' style='text-decoration: none; border-radius: 10px; color:#000000; display: block; width:220px; height: 15px;	vertical-align: middle; background: #c1e9f5;' href='http://opix.es/tienda/".$pro['Categoria1']."/".$pro['Categoria2']."?a='>".left($pro['Categoria2'],30)."</a></p>";
		}
	else
		{
			$pus = 15*$z;
			$x = $x+1;
 
			echo "</div><div id'clearing'></div><div id='".$pus."' class='item'><a onmouseover='javascript: esperar(1)' href='http://opix.es/tienda/".$pro['Categoria1']."?a='>".$pro['Categoria1']."</a>";
		}
	$ulti=$pro['Categoria1'];
}
?>
 
<script type="text/javascript">
 
function esperar(espera)
{
	setSeconds(2);
	setTimeout("",espera);
 
}
function ma()
{
	document.cookie="a=";
 
}
 
</script>
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