Создание адаптивного меню
При ширине экрана равной 888 пикселей пункты меню начинают съезжать.
Для решения этой проблемы было придумано гамбургер меню. Гамбургер меню представляет три горизонтальные линии которые параллельны друг другу.
При нажатии на иконку гамбургера выпадает меню. При этом сама иконка превращается в крестик.
Создадим линии гамбургера. Но перед этим нужно обернуть уже существующее меню в div и назовем его nav. Далее в только что созданный блок над меню добавим линии гамбургера.
Создавать линии гамбургера будем с помощью трех divов. При этом их нужно обернуть в блок с названием класса "lineburger".
<div class="line line2"></div>
<div class="line line3"></div>
Из необычного здесь для линий применяется по два класса. У HTML элемента может быть неограниченное количество классов. В нашем случае класс " line" применяется для всех элементов. И классы "line1", "line2" и "line3 " используются индивидуально для каждого элемента.
Далее наберем код в файле стилей.
Как было ранее сказано что при 888 пикселей пункты меню начинают наезжать друг на друга. Поэтому создадим еще один медиазапрос, который аналогично предыдущему запросу округлим до 900 пикселей.
И медиазапрос в коде будет выглядеть так:
Все стили применяемые для меню, при размере экрана меньше 900 пикселей, мы будем записывать в этот медиазапрос.
Ну и наконец давайте вставим стили во вновь созданный медиазапрос.
display block ;
z-index 2 ;
top 150px ;
left 35px ;
width 35px ;
background-color black ;
margin-bottom 6px ;
border-radius 10px ;
Далее добавим флажок (checkbox). Имеено с помощью чекбокса будет выдвигаться меню и иконка гамбургера превращается в крестик.
Этот чекбокс нужно добавить над блоком с классом "lineburger".
Далее нужно этот чекбокс сделать прозрачным, подогнать к размерам иконки гамбургера и совместить их положение. Это мы сделаем с помощью стилей:
height 40px ;
width 40px ;
position absolute ;
z-index 3 ;
top 140px ;
left 30px ;
opacity 0 ; /*делает инпут прозрачным*/
