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

Здравствуйте.
Нужно реализовать такое, необычное меню для сайта.
Как посоветуйте лучше всего сделать его?
spoiler
5abd23de9d1f7884658799.jpeg
  • Вопрос задан
  • 1350 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега Вёрстка
Creative frontend developer
1. Окружность большого диаметра - большой div, большой border-radius, тонкий border.
2. Пункты меню расположены абсолютным позиционированием один поверх другого, затем с помощью transform: rotate подвинуты в нужные положения (как в этом примере, только углы меньше).
3. Затемнение сверху и снизу - это линейный градиент поверх всего этого, в центре он прозрачный, по краям - видимо синий.
4. Центральный (активный) элемент меню при попадании в центр изменяется - из точки увеличивается с помощью transform: scale иконка, а вокруг нее делается что-то такое.
5. Соответственно остается прикрутить js-логику: считать углы в зависимости от количества элементов, все это поворачивать (при переходе к новому пункту меню), добавить поддержку клавиатуры (и видимо мышки, чтобы меню проворачивать колесиком) и адаптивность (на маленьких экранах можно всю эту красоту спрятать и оставить пункты меню в столбик).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы