I have a wheel menu in css/js and currently I have 8 menu elements. But I want 6 or 12 menu elements. I am tried few hours, but it's not working perfectly, when I add more or delete some div elements, it's buggy. How I can do it?
https://jsfiddle.net/b9f4x8d2/
I need help with this
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);
}
and this part:
-webkit-clip-path: polygon(0 0, 0 99%, 99% 0);
clip-path: polygon(0 0, 0 99%, 99% 0);
This suggestion requires additional modifications, but it may provide a start. It changes from 8 selections to 6.
The following are modifications to your fiddle code and are NOT intended to be executed here.
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>