Tengo un menú de rueda en css/js y actualmente tengo 8 elementos de menú. Pero quiero 6 o 12 elementos de menú. Lo intenté algunas horas, pero no funciona perfectamente, cuando agrego más o elimino algunos elementos div, hay errores. ¿Cómo puedo hacerlo?
https://jsfiddle.net/b9f4x8d2/
Necesito ayuda con esto
function onMouseMove({ clientX: x, clientY: y }) { if (!showing) return; let dx = x - anchorX; let dy = y - anchorY; let mag = Math.sqrt(dx * dx + dy * dy); let index = 0; if (mag >= min) { let deg = Math.atan2(dy, dx) + 0.625 * Math.PI; while (deg < 0) deg += Math.PI * 2; index = Math.floor(deg / Math.PI * 4) + 1; } wheel.setAttribute('data-chosen', index); }y esta parte:
-webkit-clip-path: polygon(0 0, 0 99%, 99% 0); clip-path: polygon(0 0, 0 99%, 99% 0);Esta sugerencia requiere modificaciones adicionales, pero puede proporcionar un comienzo. Pasa de 8 selecciones a 6.
Las siguientes son modificaciones a su código de violín y NO están destinadas a ejecutarse aquí.
const listeners = { 1: () => { }, 2: () => { }, 3: () => { }, 4: () => { }, 5: () => { }, 6: () => { } }; .wheel .arc:nth-child(1) img { --rotation: 30deg; transform: scale(1) rotate(var(--rotation)) !important; } .wheel .arc:nth-child(2) img { --rotation: -30deg; transform: scale(1) rotate(var(--rotation)) !important; } .wheel .arc:nth-child(3) img { --rotation: -90deg; transform: scale(1) rotate(var(--rotation)) !important; } .wheel .arc:nth-child(4) img { --rotation: -150deg; transform: scale(1) rotate(var(--rotation)) !important; } .wheel .arc:nth-child(5) img { --rotation: -210deg; transform: scale(1) rotate(var(--rotation)) !important; } .wheel .arc:nth-child(6) img { --rotation: -270deg; transform: scale(1) rotate(var(--rotation)) !important; } .wheel[data-chosen="1"] .arc:nth-child(1), .wheel[data-chosen="2"] .arc:nth-child(2), .wheel[data-chosen="3"] .arc:nth-child(3), .wheel[data-chosen="4"] .arc:nth-child(4), .wheel[data-chosen="5"] .arc:nth-child(5), .wheel[data-chosen="6"] .arc:nth-child(6) { opacity: 1; transform: scale(1.1) rotate(var(--rotation)) !important; filter: brightness(150%); } .wheel .arc:nth-child(1) { --rotation: -30deg; } .wheel .arc:nth-child(2) { --rotation: 30deg; } .wheel .arc:nth-child(3) { --rotation: 90deg; } .wheel .arc:nth-child(4) { --rotation: 150deg; } .wheel .arc:nth-child(5) { --rotation: 210deg; } .wheel .arc:nth-child(6) { --rotation: 270deg; } <div class="wheel"> <div class="arc"> Directory <br>Listing </div> <div class="arc"> Test 2 </div> <div class="arc"> Test 3 </div> <div class="arc"> Test 4 </div> <div class="arc"> Test 5 </div> <div class="arc"> Test 6 </div> </div>