Joomla - funcion slidedown de jquery no funciona con joomla 3

   
Vista:

funcion slidedown de jquery no funciona con joomla 3

Publicado por Andres (1 intervención) el 08/05/2014 04:24:41
buenos dias.

he estado trabajando en un menu deslisable con jquery, el menu me a resultado bien en joomla 2.5, pero cuando intento ponerlo en joomla 3 no me funciona, no me muestra nisiquiera un error solo se queda quieto y no realiza la animacion.

este es mi codigo

1
2
3
4
5
6
7
8
9
<script>
  $(document).ready(function() {
    $('.nav li').hover(function(){
      $(this).find('ul').stop(true, true).slideDown('slow');
    }, function(){
      $(this).find('ul').stop(true, true).slideUp('slow');
  });
  });
</script>

esta es la clase

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
74
75
76
77
78
79
80
81
82
83
<style>
#mainmenu .nav{
  padding: 0;
  width: 30%;
  height: 25px;
  margin: 0px 20px;
  text-align: center;
}
#mainmenu ul{
  margin: 0;
  padding: 0;
  position: absolute;
  float: left;
}
#mainmenu li{
  list-style-type: none;
  position: relative;
  float: left;
  padding: 0;
  margin: 0;
  margin-top: 3px;
  display: inline;
}
#mainmenu .item-102 ul li{
  float: left;
  position: relative;
  display: inline;
}
#mainmenu .item-102 ul{
  background-color: #03F;
  display: none;
  border: 1px solid #000000;
  position: absolute;
  float: left;
  width: 171px;
}
#mainmenu .item-102 ul a{
  background-color: #03F;
  display: block;
  margin: 0px 0px;
  margin-bottom: 3px;
  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius : 0px;
}
#mainmenu .item-102 ul a:hover{
  background-color: #06F;
}
#mainmenu .item-101 a:hover{
  background-color: #F00;
  text-shadow: 1px 1px #000000;
}
#mainmenu .item-102 a:hover{
  background-color: #03F;
  text-shadow: 1px 1px #000000;
}
#mainmenu .item-105 a:hover{
  background-color: #060;
  text-shadow: 1px 1px #000000;
}
#mainmenu a{
  padding: 0 15px;
  font-size: 12pt;
  margin-right: 3px;
  background-color: #000;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  -moz-border-radius-topright: 7px;
  -moz-border-radius-topleft: 7px;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
  -webkit-top-right-radius: 7px;
  -webkit-top-left-radius: 7px
}
</style>
este es mi menu
 
 <div id="mainmenu">
    		<div class="moduletable">
					<ul class="nav menu">
<li class="item-101 current active"><a href="/" >Inicio</a></li><li class="item-102"><a href="/" >Quienes somos</a><ul class="nav-child"><li class="item-103"><a href="/" >Historia</a></li><li class="item-104"><a href="/" >Mision</a></li></ul></li><li class="item-105"><a href="/" >Contacto</a></li></ul>
		</div>
 
    </div>

ayuda por favor
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