JQuery - Menú con submenús con submenús desplegables? No me sale. Ayuda!

   
Vista:
Imágen de perfil de Jesus Alberto

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.

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Menú con submenús con submenús desplegables? No me sale. Ayuda!

Publicado por aquiles (9 intervenciones) el 13/06/2013 06:59:34
Hola amigo.

Una vez cree un menu solo con css y html pero hasta ahora no lo utilice solo fue para aprendizaje.


menu1.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
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
body
{
	font-family:arial;
	font-size:10pt;
}
.menu
{
	height:25px;
	background-color:;
	border:1px solid #eeeeee;
}
.menu ul
{
	position:absolute;
	background-color:#eeeeee;
	border:1px solid #bbbbbb;
	padding-left:10px;
	margin:0px;
	border-radius: 0 0 0 10px;
}
.menu > ul ul
{
	display:none;
	white-space:nowrap;
 
}
.menu > ul li:hover > ul
{
	display:block;
	position:absolute;
}
.menu > ul ul ul
{
	left:100%;
	top:-1px;
}
.menu li
{
	list-style:none;
	position:relative;
}
/*
.menu > ul > li 
{
	padding:0px;
	background-color:red;
}
*/
.menu ul > li /* Color seleccion para los li */
{
	background-color:white;
	padding:4px 10px;
}
.menu ul > li:hover /* Color over seleccion para los li */
{
	background-color:#ccccaa;
	padding: 4px 10px;
	cursor:pointer;
}
.menu_horizontal > ul > li /* S&oacute;lo para li de primer nivel */
{
	float:left;
}
.menu_horizontal > ul ul
{
    top:100%; left:0%
}
.menu_vertical > ul > li /* S&oacute;lo para li de primer nivel */
{
}
.menu_vertical > ul ul
{
    top:0%; left:100%
}



menu1.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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
 
<head>
	<link rel="stylesheet" type="text/css" href="menu1.css"/>
</head>
 
<body>
 
 
<div class="menu menu_horizontal">
	<ul>
		<li>
			Menu1
			<ul>
				<li>
					Sub Menu 1.1
					<ul>
						<li>Sub Menu 1.1.1</li>
						<li>Sub Menu 1.1.2</li>
						<li style="padding:2px 0px;"></li>
					</ul>
				</li>
				<li>Sub Menu 1.2</li>
			</ul>
		</li>
		<li>
			Menu2
			<ul>
				<li>Sub Menu 2.1</li>
				<li>
					Sub Menu 2.2
					<ul>
						<li>Sub Menu 2.1.1
							<ul>
								<li>Sub Menu 3.1.1</li>
								<li>Sub Menu 3.1.2</li>
								<li>Sub Menu muasdh sajkdhad </li>
								<li><hr style="background-color:red;"/></li>
								<li>Sub Menu 3.1.4</li>
								<li>Sub Menu 3.1.5</li>
								<li>Sub Menu 3.1.6</li>
								<li>Sub Menu 3.1.7</li>
							</ul>
						</li>
						<li>Sub Menu 2.1.2</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>


Espero que te sirva, Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Jesus Alberto

Menú con submenús con submenús desplegables? No me sale. Ayuda!

Publicado por Jesus Alberto (13 intervenciones) el 13/06/2013 23:21:33
Jo! interesante, muchas gracias!
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