Mismo efecto click que hover
Publicado por mblascog (32 intervenciones) el 24/08/2021 17:06:37
Buenas, encontré este código por Internet. Me gusta y se ajusta a lo que quiero. Es un menú, y una de les opciones tiene un submenú. Llevo horas peleándome.
Me gustaría que al seleccionar una de las subopciones (31-38) al clicar desapareciera la lista, es decir, lo mismo que un mouseover.
He intentado en jquery lo siguiente:
Al prlimer click se esconde, pero luego ya no aparece más
Alguien podría ayudarme. Aquí va el código entero. Muchas gracias
Me gustaría que al seleccionar una de las subopciones (31-38) al clicar desapareciera la lista, es decir, lo mismo que un mouseover.
He intentado en jquery lo siguiente:
1
$(".menu li ul").css("opacity", "0");
Alguien podría ayudarme. Aquí va el código entero. Muchas gracias
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.menu, .menu ul, .menu li, .menu a {margin: 0;padding: 0;border: none;outline: none;}
.menu {height: 40px;width: 530px;background-color:#fff;}
.menu li {position: relative;list-style:none;float: left;display: block;height: 40px;background:#fff;width:100px;}
.menu a {display: block;padding: 0 16px;margin: 6px 0;line-height: 28px;text-decoration: none;font-family:"inconsolata", Arial, Helvetica, sans-serif;font-size: 16px;background: #fff;color: #000;transition: color .2s ease-in-out;}
.menu li:firs-child a {border-left: none;}
.menu li:last-child a {border-right: none;}
.menu li:hover > a {color: #fab31e;opacity:1;}
.menu ul {position: absolute;top: 40px;left: 0px;opacity: 0;background: #222;border-radius: 0 0 5px 5px;transition: opacity .20s ease .1s;}
.menu li ul li {border:1px solid white}
.menu li ul li a{background: #f2f2f2;border:0}
.menu li:hover > ul {opacity: 1;}
.menu ul li {height: 0;overflow: hidden;padding: 0;transition: height .25s ease .1s;}
.menu li:hover > ul li {height: 36px;overflow: visible;padding: 0;}
.menu ul li a {width: 130px;padding: 4px 10px;margin: 0;border: none;border-bottom: 1px solid #353539;}
.menu ul li:last-child a {border: none;}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a>
<ul>
<li><a href="#">Subopción 31</a></li>
<li><a href="#">Subopción 32</a></li>
<li><a href="#">Subopción 33</a></li>
<li><a href="#">Subopción 34</a></li>
<li><a href="#">Subopción 35</a></li>
<li><a href="#">Subopción 36</a></li>
<li><a href="#">Subopción 37</a></li>
<li><a href="#">Subopción 38</a></li>
</ul>
</li>
<li><a href="#">Opción 4</a></li>
<li><a href="#"></a>
<ul>
<li><a href="#">Opción 5</a></li>
</ul>
</li>
</ul>
</body>
</html>
Valora esta pregunta
0