How to make round slider circular arrangement of elements?

I’m trying to make a circular section with such elements. “Manual” adjustment is not responsive and doesn’t work at all. Who has any ideas on how it should be done?
The first goal is just to position the elements and leave them responsive. The second task (maybe it could be better) is to do this with a slider that will animate it somehow.

Will be grateful for any help.

That’s an unusual menu design, and you’re wanting animation so I’d probably look into Lotties for that, using After Effects.

Other options include HTML Canvas, an SVG, or possibly some JS libraries.

The plain HTML approach would probably be to use absolutely-positioned elements within a relative container.

No matter what approach you take, your menu won’t be automatically “responsive”. How should it respond to a narrower screen? Elements like an HTML canvas can just shrink, but the buttons may be too small to hit with your finger.

HTML Layout gives you more flexibility, but you’ll need to decide how the menu should change responsively for each breakpoint and define that.

1 Like