- Теория
- Теория
Круговое меню, шаг 2
Внутри пунктов меню расположены ссылки. Для них задан блочный тип, размеры и фон — эти исходные стили нужно просто раскомментировать.
На предыдущем шаге мы повернули и скосили пункты меню, но при этом скосилось и их содержимое, то есть ссылки. Чтобы вернуть им нормальный вид, нужно их «разнаклонить» и развернуть обратно.
«Разнаклонять» будем на противоположный угол, то есть на -30°
.
Расчёт угла разворота сложнее, вот формула:
[угол разворота] = -1 * (90° – ([угол сектора] / 2))
В нашем случае получится:
[угол разворота] = -1 * (90° - (60° / 2)) = -60°
Обратите внимание на порядок трансформаций для ссылок: сначала skew
, потом rotate
.
И ещё одна важная деталь. Нам нужно сместить ссылки так, чтобы они располагались во внутренней половине пунктов меню. Для этого используем маргины.
Без JavaScript будущему разработчику никуда. Записывайтесь на профессиональный курс «JavaScript. Профессиональная разработка веб-интерфейсов». Цена 12 000 ₽.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.