Как сделать иконку "Гамбургер" (три полоски) на CSS

Последнее обновлене - 4 июля 2023 в 18:26

В этой короткой заметке покажу, как сделать иконку «Гамбургер» на CSS. Три параллельные горизонтальные полоски, или как их еще называют «Гамбургер», обычно используется для обозначения меню на сайте.

На одном из сайтов сначала я использовал изображение для обозначения меню. Но однажды мне пришла идея заменить картинку на HTML и CSS код.

Сделать это достаточно просто. Напишем HTML-каркас и немного стилизуем его.

<div class="red-square-cat">
  <div class="lines"></div>
</div>

</div>

Добавил стили. Сначала описал подложку, а затем и полоски.

.red-square-cat {
  position: relative;
  width: 46px;
  height: 46px;
  background-color: #DC5954;
}

.lines {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-bottom: 12px double #fff;
  border-top: 4px solid #fff;
  content: "";
  height: 4px;
  width: 30px;
  box-sizing: unset;
  display: inline-block;
  vertical-align: middle;
}

.red-square-cat {

position: relative;

width: 46px;

height: 46px;

background-color: #DC5954;

}

.lines {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

border-bottom: 12px double #fff;

border-top: 4px solid #fff;

content: "";

height: 4px;

width: 30px;

box-sizing: unset;

display: inline-block;

vertical-align: middle;

}

Посмотрите демонстрацию кода.

Всем WEB!

Как сделать иконку «Гамбургер» на CSS

Об авторе: Hobo

Добавить комментарий Отменить ответ

Почитайте похожие материалы

Оглавление с подпунктами на сайте

Топ комментаторов

Об авторе: Hobo

Добавить комментарий Отменить ответ