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

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

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

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

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

Для начала напишем на SCSS коде, так как он гораздо понятнее. Если вы еще пишите на простом CSS, то я настоятельно советую вам начать осваивать хотя бы базовые возможности SCSS. В статье Подключение SASS (SCSS) к PHP Storm можно узнать как подключить компилятор к проекту на PhpStorm. Ну а мы продолжим:

.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.