Как лучше всего реализовать это меню?

Question

[Кирилл]

Здравствуйте.
Нужно реализовать такое, необычное меню для сайта.
Как посоветуйте лучше всего сделать его?

spoiler

Answer 1

[Ivan Bogachev]

1. Окружность большого диаметра - большой div, большой border-radius, тонкий border.
2. Пункты меню расположены абсолютным позиционированием один поверх другого, затем с помощью transform: rotate подвинуты в нужные положения (как в этом примере, только углы меньше).
3. Затемнение сверху и снизу - это линейный градиент поверх всего этого, в центре он прозрачный, по краям - видимо синий.
4. Центральный (активный) элемент меню при попадании в центр изменяется - из точки увеличивается с помощью transform: scale иконка, а вокруг нее делается что-то такое.
5. Соответственно остается прикрутить js-логику: считать углы в зависимости от количества элементов, все это поворачивать (при переходе к новому пункту меню), добавить поддержку клавиатуры (и видимо мышки, чтобы меню проворачивать колесиком) и адаптивность (на маленьких экранах можно всю эту красоту спрятать и оставить пункты меню в столбик).

Comments

[Кирилл]

Не поможете реализовать это?

[Павел Антонов]

Не поможете реализовать это?

ахахаха))

[ⓒⓢⓢ]

Хороший 3 пункт - убивает напрочь всю навигацию =)

[Ivan Bogachev]

JRK_DV, не убивает если отключить pointer-events.

[ⓒⓢⓢ]

Ivan Bogachev, вот же, точно