• Теория
  • Теория

Круговое меню, финал

Вот и вся техника для создания круглого меню:

  1. Переносим ось вращения пунктов в угол с помощью transform-origin и совмещаем этот угол с центром меню.
  2. Наклоняем и поворачиваем пункты меню, используя формулы:

    [угол сектора] = 360° / [количество пунктов меню]
    [поворот пункта n] = (n - 1) * [угол сектора]
    [угол наклона] = 90° - [угол сектора]
  3. «Разнаклоняем» и разворачиваем содержимое пунктов меню:

    [угол наклона содержимого] = -1 * [угол наклона пункта]
    [угол разворота] = -1 * (90° – ([угол сектора] / 2))
  4. Смещаем содержимое пунктов к центру круга.
  5. Закругляем контейнер меню с помощью border-radius и обрезаем всё лишнее с помощью overflow: hidden.

А после этих шагов можно применять дополнительное оформление. Например, задавать разные фоны пунктов, рамку для контейнера меню и так далее.

Давайте напоследок добавим третий пункт меню, чтобы у нас получился полукруг. Угол поворота третьего пункта будет равен 120°:

Серия заданий сделана по мотивам этой статьи Building a Circular Navigation with CSS Transforms. Примеры были адаптированы и упрощены для тренажёра.

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 27 мая 2024. Всего от 4690 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Двумерные трансформации» тренажёра «Продвинутые декоративные эффекты» можно после регистрации и оформления подписки.