- Теория
- Теория
Круговое меню, финал
Вот и вся техника для создания круглого меню:
- Переносим ось вращения пунктов в угол с помощью
transform-origin
и совмещаем этот угол с центром меню. Наклоняем и поворачиваем пункты меню, используя формулы:
[угол сектора] = 360° / [количество пунктов меню] [поворот пункта n] = (n - 1) * [угол сектора] [угол наклона] = 90° - [угол сектора]
«Разнаклоняем» и разворачиваем содержимое пунктов меню:
[угол наклона содержимого] = -1 * [угол наклона пункта] [угол разворота] = -1 * (90° – ([угол сектора] / 2))
- Смещаем содержимое пунктов к центру круга.
- Закругляем контейнер меню с помощью
border-radius
и обрезаем всё лишнее с помощьюoverflow: hidden
.
А после этих шагов можно применять дополнительное оформление. Например, задавать разные фоны пунктов, рамку для контейнера меню и так далее.
Давайте напоследок добавим третий пункт меню, чтобы у нас получился полукруг. Угол поворота третьего пункта будет равен 120°
:
Серия заданий сделана по мотивам этой статьи Building a Circular Navigation with CSS Transforms. Примеры были адаптированы и упрощены для тренажёра.
Минимальный вид табов
- index.html
HTML
HTML
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
100%