PHP - MENU VERTICAL DESPLEGABLE CON SUB MENU

   
Vista:

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.

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


Captura-de-pantalla-6

Pero al hacer click, no me despliega el menu, me podrian ayudar muchisimas gracias
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

MENU VERTICAL DESPLEGABLE CON SUB MENU

Publicado por ferley (15 intervenciones) el 10/01/2017 00:17:41
Buena tarde, les cuento que ya resolvi la inquietud dejo el codigo html y css de la solucuion.

codigo 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>
<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>
			<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 class="submenu">
						<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="#">item 3</a></li>
						<li><a href="#">item 4</a></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>
						<li><a href="#">item 5</a></li>
						<li><a href="#">item 6</a></li>
						<li><a href="#">item 7</a></li>
						<li><a href="#">item 8</a></li>
						<li><a href="#">item 9</a></li>
						<li><a href="#">item 10 largo </a></li>
					</ul>
				</li>
			</ul>
		</header>
 
 
	</body>
</html>

y el codigo 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
91
92
93
94
95
96
97
98
*{
	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;
}
 
header#menu{
	position: absolute;
	width: 170px;
	height: 100%;
	background-color: #1a95d5;
}
 
header#logo{	
	margin: 10px;
}
 
header#menu .menu{
	width: 100%;
}
 
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;
}
 
.menu{
    padding:0;
    list-style:none;
    font-size:18px;
    background:#1a95d5;    
}
 
.menu li a{
    display: block;
    border-bottom: 1px solid rgba(0,0,0, 0.2);
    border-top: 1px solid rgba(255,255,255, 0.2);
    background:#1a95d5;
    text-decoration:none;
    color:#FFF;
    text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
    filter: dropshadow(color=#000, offx=1, offy=0);
    padding:10px;
    padding-left:20px;
}
 
.menu li ul li a, .submenu li ul li a{
    font-size:14px;
    background:#4a6ba2;
    text-shadow: 1px 0px 1px rgba(255,255,255,0.5);
}
 
.menu li a:hover{
    background:#c1c1c1;
    -moz-transition: background 0.3s ease-in;
    -webkit-transition: background 0.3s ease-in;
    -o-transition: background 0.3s ease-in;
}
 
ul.menu ul, ul.submenu ul{
    margin:0;
    padding:0;
    list-style:none;
    height:0;
    overflow: hidden;
    transition:0.3s;
    -moz-transition:0.3s;
    -webkit-transition:0.3s;
}
 
ul.menu > li:hover > ul, ul.submenu > li:hover > ul{
    height:100%;
    overflow:visible;
 
}
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 xve

MENU VERTICAL DESPLEGABLE CON SUB MENU

Publicado por xve (6035 intervenciones) el 10/01/2017 07:52:05
Gracias por compartirlo!!!
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