PHP - Crear menú con varios submenús

 
Vista:
sin imagen de perfil
Val: 84
Ha aumentado su posición en 64 puestos en PHP (en relación al último mes)
Gráfica de PHP

Crear menú con varios submenús

Publicado por German David (35 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.

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 it
	window.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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder