mail@vecdev.ru

Готовая кнопка "гамбургер" для бокового меню на CSS и SCSS

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

2022-03-14_23-39-38.png

Рассмотрим несколько вариантов построения мобильной кнопки Hamburger для верстки мобильного меню. Для начала HTML код:

                        
                        
<button class="hamburger" id="mobile-menu-btn"> <div class="btn__hamb"> <div></div> </div> </button>

У нас выходит основной блок, я захотела сделать button, хотя можно и a href="javascript:void(0)", а можно и простой div сделать, это не принципиально важно.

Подключение SASS (SCSS) к PHP Storm


.hamburger{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid #0E7318;
  background: #fff;
  padding: 5px;
  border-radius: 8px;
}
.btn__hamb{
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  background: #0E7318;
  cursor: pointer;
  div{
    width: 100%;
    height: 100%;
  }
  &:before, &:after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background: #0E7318;
  }
  &:before{
    top: -8px;
  }
  &:after{
    top: 8px;
  }
}
 

Ну а для хардкорщиков я продублирую все и на CSS:


.hamburger {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border: 1px solid #0E7318;
  background: #fff;
  padding: 5px;
  border-radius: 8px; }

.btn__hamb {
  position: relative;
  display: block;
  width: 100%;
  height: 4px;
  background: #0E7318;
  cursor: pointer; }
  .btn__hamb div {
    width: 100%;
    height: 100%; }
  .btn__hamb:before, .btn__hamb:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    background: #0E7318; }
  .btn__hamb:before {
    top: -8px; }
  .btn__hamb:after {
    top: 8px; }

Для наглядности повторю проект в CodePen.

Рабочий код "Готовая кнопка "гамбургер" для бокового меню на CSS и SCSS"

Смотреть Pen Glass by VectorDev (@VectorDEV) на CodePen.

Частный разработчик сайтов Vector Dev
Комментарии
Загрузить файл или картинкуПеретащить с помощью Drag'n'drop
Перетащите файлы
Ничего не найдено
Защита от автоматических сообщений