МЕНЮ

Гамбургер в крестик

Далее нам нужно сделать так чтобы линии иконки гамбургера превращались в крестик. Для этого в файле стилей нужно набрать следующий код.

Для первой линии:

.line1{
transform-origin 0% 0% ;
transition transform 0.4s ;
}
.nav input:checked ~ .lineburger .line1{
transition rotate(35deg) ;
}

Этот код поворачивает первую линию на 35 градусов с помощью transform: rotate(35deg). Свойство transform-origin задает точку, относительно которой будут происходить вращение линии. В данном случае точка располагается в начале линии.

Для плавного вращения линии применяется свойство transition: transform 0.4s.

При включении чекбокса в положение включено псевдокласс :checked поворачивает линию.

Вторая линия:

.ddd .line2{
transition transform 0.2s ;
}
.nav input:checked ~ .lineburger .line2{
transition scaleY(0) ;
}

Вторая линия при нажатом чекбоксе нам не нужна. Поэтому уберем ее с помощью transform: scaleY(0). Этот код уменьшает среднюю лини п о вертикали.

Третья линия:

.ddd .line3 {
transform-origin 0% 100% ;
transition transform 0.4s ;
}
.nav input:checked ~ .lineburger .line3{
transition rotate(-35deg) ;
}

У третей линии все аналогично первой линии. Отличие только в том что третья линия вращается на 35 градусов в другую сторону. И точка на линии вокруг которой она вращается расположена в конце.

Рис гифка то как появляется крестик
Адаптивное меню <<НазадМеню Далее>> Создание выпадающего меню