Как сделать бургер html css
Ответы
Ivan Gagarinov
16 июля 2024
Для создания бургера (иконки гамбургера) в HTML и CSS, вы можете использовать нижеприведенный код.
HTML:
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
CSS:
.burger {
width: 30px;
height: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.line {
width: 100%;
height: 3px;
background-color: #000;
}
В данном примере, создается блок с классом burger, который содержит три блока с классом line, представляющих линии бургера. С помощью CSS свойства display: flex и flex-direction: column мы выстраиваем линии в вертикальном направлении, а justify-content: space-between делает расстояние между линиями одинаковым.
Можно стилизовать бургер, добавив анимацию при клике или изменяя цвет и толщину линий по вашему усмотрению. Внесите необходимые изменения в CSS, чтобы стилизовать бургер и адаптировать его под ваш дизайн.
0
0