Menú con submenús con submenús desplegables? No me sale. Ayuda!
Publicado por Jesus Alberto (13 intervenciones) el 23/05/2013 18:13:27
Hola. Tengo mi menú y tiene su submenús desplegables y todo estaba bien. Pero me vi en la necesidad de agregar un submenú al submenú del menú.
Aquí el código html.
Css
Y el importante el Js:
Lo que hace ahora que le agregué un submenú compra/venta y en él un submenú cada vez que doy clic por obvias razones se abre una y se cierra otra.
Verán. Doy clic en Divisas. Se me despliega Compra/Ventea y Agregar. Doy clic en Compra/Venta y se me despliega el menú correspondiente de Dolar Euro y Yen pero al mismo tiempo se cierra toda la pestaña Divisas. Le doy clic otra vez en divisas y ya me abre ahora si como lo quería al principio.
No hay una propiedad en Jquery que le diga que cuando le de clic a cierta li con una id no me ejecute lo de SlideUp?
Espero haberme dado a entender. Saludos!
Aquí el código 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
29
30
31
32
33
34
35
36
37
38
39
<nav id="menu">
<ul>
<li><a href="#">Divisas</a>
<ul>
<li><a href="#">Compra/Venta</a>
<ul>
<li><a href="#"> - Dolar</a></li>
<li><a href="#"> - Euro</a></li>
<li><a href="#"> - Yen</a></li>
</ul>
</li>
<li><a href="#">Agregar</a></li>
</ul>
</li>
<li><a href="#">Tipo de Cambio</a></li>
<li><a href="#">Ajustes</a>
<ul>
<li><a href="#"> - Egresos</a></li>
<li><a href="#"> - Ingresos</a></li>
</ul>
</li>
<li><a href="#">Cancelación</a>
<ul>
<li><a href="#"> - Compra</a></li>
<li><a href="#"> - Venta</a></li>
<li><a href="#"> - Ingreso</a></li>
<li><a href="#"> - Egreso</a></li>
</ul>
</li>
<li><a href="#">Usuarios</a>
<ul>
<li><a href="#"> - Registro</a></li>
<li><a href="#"> - Modificación</a></li>
<li><a href="#"> - Eliminar</a></li>
</ul>
</li>
</ul>
</nav>
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
35
36
37
38
39
40
41
42
43
44
45
#menu{
font-size: 1em;
-moz-border-radius-bottom:5px;
-webkit-border-radius-bottom:5px;
border-radius-bottom:5px;
-webkit-box-shadow:1px 1px 3px black;
-moz-box-shadow:1px 1px 3px black;
width: 350px;background-image: url(../img/fondo-azul.jpg);
}#menu ul li{border-bottom:1px solid #FFF;}
#menu li ul li, #menu ul li:last-child{border:none;}
#menu ul li a{
display:block; color:black;text-decoration:none;
font-family:'Helvetica', Arial, sans-serif;
font-size:2em;
padding:3px 15px;text-shadow:1px 1px 1px #325179;
}#menu ul li a:hover{
color:#F9B855;
-webkit-transition: color 0.2s linear;
}#menu ul li ul a{font-size: 1.3em; }
#menu ul li ul a:hover{
color:#2961A9;
text-shadow:none;
-webkit-transition: color, background-color 0.2s linear;
}#menu ul li ul{
display:block; margin:0; padding:0; width:330px;list-style:none;
}#menu ul li ul {display:none;}
#menu a span { display:block; float:right; margin-left:5px; margin-top: -22px; color: red; font-family: Angsana New;}
Y el importante el Js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(function(){
$('#menu ul li a').click(function(event){
var elem = $(this).next();
if(elem.is('ul')){
event.preventDefault();
$('#menu ul ul:visible').not(elem).slideUp();
elem.slideToggle();
}});
});
</script>
Lo que hace ahora que le agregué un submenú compra/venta y en él un submenú cada vez que doy clic por obvias razones se abre una y se cierra otra.
Verán. Doy clic en Divisas. Se me despliega Compra/Ventea y Agregar. Doy clic en Compra/Venta y se me despliega el menú correspondiente de Dolar Euro y Yen pero al mismo tiempo se cierra toda la pestaña Divisas. Le doy clic otra vez en divisas y ya me abre ahora si como lo quería al principio.
No hay una propiedad en Jquery que le diga que cuando le de clic a cierta li con una id no me ejecute lo de SlideUp?
Espero haberme dado a entender. Saludos!
Valora esta pregunta
0