script> // Função para criar e posicionar dinamicamente os itens no círculo function createMenuItems(numItems) { var container = document.getElementById('menu-container'); for (var i = 0; numItems; i++) { var angle = (i / numItems) * 2 * Math.PI; var rotationAngle = -Math.PI / 2; // Ângulo de rotação para centralizar o item superior var rotatedAngle = angle + rotationAngle; var x = 225 * Math.cos(rotatedAngle) + 225; // Raio do círculo é 225px var y = 225 * Math.sin(rotatedAngle) + 225; var menuItem = document.createElement('div'); menuItem.className = 'menu-item'; menuItem.textContent = (i + 1).toString(); menuItem.style.left = (x - 40) + 'px'; // Ajuste para centralizar menuItem.style.top = (y - 40) + 'px'; // Ajuste para centralizar // Adicionando círculos azuis à parte principal do container container.appendChild(menuItem); // Adicionando títulos ao lado dos círculos var menuTitle = document.createElement('div'); menuTitle.className = 'menu-title'; menuTitle.textContent = 'Título ' + (i + 1).toString(); // Ajustando a posição dos títulos if (i === 0) { // Título 1: centralizado acima do círculo com padding menuTitle.style.left = x + 'px'; menuTitle.style.top = y - 45 - 5 + 'px'; // Ajuste para posicionar acima do círculo com padding } else if (i === 1) { // Título 2: à direita do círculo com espaçamento menuTitle.style.left = x + 60 + 20 + 'px'; menuTitle.style.top = y + 'px'; } else if (i === 2) { // Título 3: à direita do círculo com espaçamento menuTitle.style.left = x + 60 + 20 + 'px'; menuTitle.style.top = y + 'px'; } else if (i === 3) { // Título 4: à direita do círculo com espaçamento menuTitle.style.left = x + 60 + 20 + 'px'; menuTitle.style.top = y + 'px'; } else if (i === 4) { // Título 5: abaixo do círculo com espaçamento menuTitle.style.left = x + 'px'; menuTitle.style.top = y + 60 + 20 + 'px'; } else if (i === 6) { // Título 7: à esquerda do círculo com espaçamento menuTitle.style.left = x - 60 - 20 + 'px'; menuTitle.style.top = y + 'px'; } else if (i === 7) { // Título 8: à esquerda do círculo com espaçamento menuTitle.style.left = x - 60 - 20 + 'px'; menuTitle.style.top = y + 'px'; } else if (i === 8) { // Título 9: à esquerda do círculo com espaçamento menuTitle.style.left = x - 60 - 20 + 'px'; menuTitle.style.top = y + 'px'; } else { // Outros títulos: posição ao lado direito do círculo menuTitle.style.left = x + 60 + 'px'; menuTitle.style.top = y + 'px'; } container.appendChild(menuTitle); } } // Chamando a função para criar 9 itens createMenuItems(9);