CSS - Menu activado con click en lugar de hover

 
Vista:

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 689
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Menu activado con click en lugar de hover

Publicado por xve (486 intervenciones) el 26/05/2016 22:38:26
Hola Omar, hasta donde yo se, con estilos no lo puedes hacer, para activar el click, tienes que utilizar javascript!!!
http://www.lawebdelprogramador.com/codigo/JavaScript/3204-Crear-un-evento-desde-JavaScript-con-addEventListener.html

También lo puedes hacer con jquery de manera mas sencilla...
http://www.lawebdelprogramador.com/codigo/JQuery/2627-Evento-click-en-un-boton-deshabilitado.html
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
Imágen de perfil de Evan
Val: 44
Ha disminuido su posición en 2 puestos en CSS (en relación al último mes)
Gráfica de CSS

Menu activado con click en lugar de hover

Publicado por Evan (20 intervenciones) el 27/05/2016 14:28:13
Es verdad, no existe algo en css para hacer lo que deceas directamente, pero si lo que puedes hacer es emular eso que necesitas hacer y hay mucho material en la nube sobre esto. Podrias usar el target si es dentro de la misma pagina o el focus también creo...

mira este enlace que te ayudaran o bien te daran un indicio de como hacer tu criterio de busqueda!

http://vagabundia.blogspot.com/2013/02/eventos-click-y-css.html#democlick1

saludos!
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
Revisar política de publicidad