Crear menú con varios submenús
Publicado por German David (54 intervenciones) el 19/02/2021 13:22:38
Cordial saludo. Actualmente en mi sitio tengo un menú principal que esta dispuesto en la parte superior de la pagina. Al dar clic, se despliegan varias opciones dispuestas en forma vertical. Mi deseo es dar clic en REGISTROS y que se desplegué al lado derecho de este, el submenú con las opciones CAPACITACIONES, INSTALACIONES, REVISIONES y GARANTIAS.
Este es mi código actual.
Agradezco todo la ayuda que puedan brindarme.
Este es mi código actual.
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
<style>
.dropbtn {
background-color: #3498DB;
color: white; padding: 16px;font-size: 16px;
border: none; cursor: pointer; }.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}.dropdown {
position: relative;display: inline-block;
}.dropdown-content {
display: none; position: absolute;background-color: #f1f1f1;
min-width: 160px;
overflow: auto;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}.dropdown-content a {
color: black; padding: 12px 16px;text-decoration: none;
display: block; }.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
<div class="dropdown">
<button onclick="myFunction(1,this)" class="dropbtn">GPS</button>
<div id="myDropdown1" class="dropdown-content">
<a href=" ">Informes</a>
<a href=" ">Consultas</a>
<a href=" ">Registros</a>
<ul>
<li><a href="">Capacitaciones</a></li>
<li><a href="">Instalaciones</a></li>
<li><a href="">Revisiones</a></li>
<li><a href="">Garantias</a></li>
</ul>
</div>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */function myFunction(n,boton) {
var drops = [
document.getElementById("myDropdown1")
];for(var i in drops){
drops[i].classList.remove("show");
}var drop = document.getElementById("myDropdown"+n);
drop.classList.add("show");
drop.style.left = boton.offsetLeft+"px";
console.log(boton.offsetLeft);
} // Close the dropdown if the user clicks outside of itwindow.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
} } } }</script>
Agradezco todo la ayuda que puedan brindarme.
Valora esta pregunta
0