Menu activado con click en lugar de hover
Publicado por Omar (1 intervención) el 26/05/2016 20:03:09
Tengo una página con un menú vertical activado con hover de mouse pero quiero cambiarlo a que se active con click en lugar de hover. Que es lo que necesito cambiar. Aquí está mi syntax
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<style type="text/css">
* {
margin: 0px; padding: 0px;}nav {font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 150px;-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}.menu-item {
background: #fff;
width: 150px;}/*Menu Header Styles*/.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;background: #a90329;
}.menu-item h4 a {
color: white; display: block;text-decoration: none;
width: 250px;}/*Menu Header Styles*/.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px; /*Gradient*/background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #A90303 0%, #900202 44%, #5F0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A90303), color-stop(44%,#900202), color-stop(100%,#5F0000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #A90303 0%,#900202 44%,#5F0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #A90303 0%,#900202 44%,#5F0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #A90303 0%,#900202 44%,#5F0000 100%); /* IE10+ */
background: linear-gradient(top, #A90303 0%,#900202 44%,#5F0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A90303', endColorstr='#5F0000',GradientType=0 ); /* IE6-9 */
}.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #CD0000 0%, #6E0000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6E0000), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #CD0000 0%,#6E0000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #CD0000 0%,#6E0000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #CD0000 0%,#6E0000 100%); /* IE10+ */
background: linear-gradient(top, #CD0000 0%,#6E0000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CD0000', endColorstr='#6E0000',GradientType=0 ); /* IE6-9 */
}/*First Item Styles*/.alpha p {
font-size: 11px;
padding: 8px 12px;color: #aaa;
}/*ul Styles*/.menu-item ul {
background: #fff;
font-size: 12px;
line-height: 20px;
list-style-type: none;
overflow: hidden; padding: 0px;}.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #AE1F1F;
display: block; width: 200px;}/*li Styles*/.menu-item li {
border-bottom: 1px solid #eee;
}.menu-item li:hover {
background: #eee;
}/*ul Styles*/.menu-item ul {
background: #fff;
font-size: 12px;
line-height: 20px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden; padding: 0px;}/*ul Styles*/.menu-item ul {
background: #fff;
font-size: 12px;
line-height: 20px;
height: 0px;list-style-type: none;
overflow: hidden; padding: 0px; /*Animation*/-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;}.menu-item:hover ul {
height: 250px;}.menu-item ul { margin-top:-1%; margin-bottom:-1%; }
</style>
Valora esta pregunta
0
