A radial menu arranges items around a central point. Trigonometry turns each item's angle and radius into CSS coordinates, creating an evenly spaced circular layout. section 1.4.8
Six items around a 70px radius
With a center at (100px, 100px), six 40px items, and a 70px radius, item 0 uses angle 0. Its position is x = 100 + 70 × cos(0) − 20 = 150 and y = 100 + 70 × sin(0) − 20 = 80. section 1.4.8
const items = document.querySelectorAll('.menu-item'); #1
items.forEach((item, i) => { #2
const angle = (2 * Math.PI / totalItems) * i; #3
const x = centerX + radius * Math.cos(angle) - 20; #4
const y = centerY + radius * Math.sin(angle) - 20; #5
item.style.left = `${x}px`; #6
item.style.top = `${y}px`; #7
});
The JavaScript listing distributes items by calculating an angle for each index, then assigning sine- and cosine-based left and top coordinates. section 1.4.8
