MENU VERTICAL DESPLEGABLE CON SUB MENU
Publicado por ferley (15 intervenciones) el 08/01/2017 21:00:29
Buen dia estoy tratando de realizar un menu desplegable vertical y me surge unas inquetudes.
aqui esta el codigo html de los menus desplegables.
este es el css
Este es el resultado
Pero al hacer click, no me despliega el menu, me podrian ayudar muchisimas gracias
aqui esta el codigo html de los menus desplegables.
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>SICA</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<link rel="stylesheet" href="css/estilos.css"/>
<link rel="stylesheet" href="css/estilo_menu.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
</head>
<body>
<header id="menu">
<header id="logo">
<a href="index.php">
<img src="img/logo.png"/>
</a>
</header>
<!--<a href="#" class="btn-menu">Menu<i class="fa fa-bars" aria-hidden="true"></i></a>--><ul class="menu">
<li><a href="#"><i class="icono izquierda fa fa-cogs" aria-hidden="true"></i>Gestionar<i class="icono derecha fa fa-chevron-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">Salon<i class="icono derecha fa fa-chevron-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">Nuevo</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Eliminar</a></li>
<li><a href="#">Consultar</a></li>
</ul>
</li>
<li><a href="#">Grupo<i class="icono derecha fa fa-chevron-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">Nuevo</a></li>
<li><a href="#">Editar</a></li>
<li><a href="#">Eliminar</a></li>
<li><a href="#">Consultar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</header>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
este es el 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
*{
margin: 0px; padding: 0px;-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}body{background:#0b2027;
font-family: verdana;
line-height: 18px;
}a{text-decoration: none;
color: #fff;
}.btn-menu{
display: block; padding: 20px;background:#0d2c44;
color: #fff;
}header#menu{
position: absolute; width: 170px;height: 100%;
background-color: #1a95d5;
}header#logo{
margin: 10px;}header#menu .menu{
width: 100%;
}header#menu ul{
list-style: none;
}header#menu .menu li a{
color: #494949;
display: block; padding: 15px 20px;background:#1a95d5;
}header#menu .menu li a:hover{
background:#e9e9e9;
color: #494949;
}header#menu .menu .icono{
font-size: 12px;
line-height: 18px;
}header#menu .menu .icono.izquierda{
float: left;margin-right: 10px;
}header#menu .menu .icono.derecha{
float: right;margin-left: : 10px;
}header#menu .menu ul{
display: none;}header#menu .menu ul li a{
background:#fff;
color: #494949;
}header#menu .menu ul li acccccccc{
background:#e9e9e9;
color: #fff;
}header#menu .menu .activado > a{
background:#e9e9e9;
color: #494949;
}Este es el resultado
Pero al hacer click, no me despliega el menu, me podrian ayudar muchisimas gracias
Valora esta pregunta
0
