-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest_menu.html
More file actions
138 lines (126 loc) · 7.01 KB
/
Copy pathtest_menu.html
File metadata and controls
138 lines (126 loc) · 7.01 KB
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
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teste Menu Dropdown</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.dropdown-menu {
animation: fadeIn 0.2s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
<script>
// JavaScript puro para dropdowns - sem dependência do Alpine.js
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM loaded, initializing dropdowns...');
initDropdowns();
});
function initDropdowns() {
const dropdownButtons = document.querySelectorAll('[data-dropdown-toggle]');
dropdownButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const dropdownId = this.getAttribute('data-dropdown-toggle');
const dropdown = document.getElementById(dropdownId);
console.log('Toggling dropdown:', dropdownId);
// Fechar todos os outros dropdowns
document.querySelectorAll('[data-dropdown]').forEach(dd => {
if (dd.id !== dropdownId) {
dd.style.display = 'none';
}
});
// Toggle do dropdown atual
if (dropdown.style.display === 'none' || dropdown.style.display === '') {
dropdown.style.display = 'block';
console.log('Dropdown opened:', dropdownId);
} else {
dropdown.style.display = 'none';
console.log('Dropdown closed:', dropdownId);
}
});
});
// Fechar dropdowns ao clicar fora
document.addEventListener('click', function(e) {
if (!e.target.closest('[data-dropdown-toggle]') && !e.target.closest('[data-dropdown]')) {
document.querySelectorAll('[data-dropdown]').forEach(dd => {
dd.style.display = 'none';
});
}
});
console.log('Dropdowns initialized successfully');
}
</script>
</head>
<body class="bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<h1 class="text-3xl font-bold text-gray-900 mb-8">Teste do Menu Dropdown</h1>
<!-- Menu de Teste -->
<nav class="bg-white shadow-lg rounded-lg p-4 mb-8">
<div class="flex space-x-8" id="main-menu">
<!-- Cadastros -->
<div class="relative">
<button data-dropdown-toggle="dropdown-cadastros" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-3 py-2 text-sm font-medium">
<i class="fas fa-database mr-2"></i>Cadastros
<i class="fas fa-chevron-down ml-1"></i>
</button>
<div id="dropdown-cadastros" data-dropdown class="absolute top-full left-0 mt-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50 dropdown-menu" style="display: none;">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<i class="fas fa-users mr-2"></i>Usuários
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<i class="fas fa-building mr-2"></i>Departamentos
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<i class="fas fa-box mr-2"></i>Produtos
</a>
</div>
</div>
</div>
<!-- Ações em Compras -->
<div class="relative">
<button data-dropdown-toggle="dropdown-compras" class="text-gray-500 hover:text-gray-700 inline-flex items-center px-3 py-2 text-sm font-medium">
<i class="fas fa-shopping-cart mr-2"></i>Ações em Compras
<i class="fas fa-chevron-down ml-1"></i>
</button>
<div id="dropdown-compras" data-dropdown class="absolute top-full left-0 mt-1 w-64 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50 dropdown-menu" style="display: none;">
<div class="py-1">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<i class="fas fa-clipboard-list mr-2"></i>Cotações
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<i class="fas fa-shopping-bag mr-2"></i>Pedidos
</a>
<div class="border-t border-gray-100 my-1"></div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<i class="fas fa-truck mr-2"></i>Fornecedores
</a>
</div>
</div>
</div>
</div>
</nav>
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-xl font-bold text-gray-900 mb-4">Instruções de Teste</h2>
<ol class="list-decimal list-inside space-y-2 text-gray-700">
<li>Clique em "Cadastros" - o dropdown deve abrir mostrando Usuários, Departamentos e Produtos</li>
<li>Clique em "Ações em Compras" - o dropdown deve abrir mostrando Cotações, Pedidos e Fornecedores</li>
<li>Clique fora dos dropdowns - eles devem fechar automaticamente</li>
<li>Abra um dropdown e clique em outro - o primeiro deve fechar e o segundo abrir</li>
<li>Verifique o console do navegador (F12) para ver as mensagens de log</li>
</ol>
<div class="mt-6 p-4 bg-blue-50 rounded-lg">
<h3 class="font-bold text-blue-900 mb-2">Status do JavaScript:</h3>
<p class="text-blue-800">Abra o console do navegador (F12) para ver as mensagens de inicialização dos dropdowns.</p>
</div>
</div>
</div>
</body>
</html>