<h1>Menu (햄버거 메뉴 아이콘)</h1>

<h2>:: 기본형</h2>
<button type="button" class="button_menu" aria-label="메뉴"><i class="icon_menu"></i></button>


<h2>:: 예시</h2>
<button type="button" class="button_menu_ex1 has_bg" aria-label="메뉴"><i class="icon_menu_ex1"></i></button>
<button type="button" class="button_menu_ex2 has_bg" aria-label="메뉴"><i class="icon_menu_ex2"></i></button>
<button type="button" class="button_menu_ex3 has_bg" aria-label="메뉴"><i class="icon_menu_ex3"></i></button>
body {
  font-family: Helvetica,"Apple SD Gothic Neo",sans-serif;
}

button {
  margin: 0;
  padding: 0;
  background-color: transparent;
  border: 0;
}

$sqrt_2: 1.41421356237;

// Menu icon SCSS mixin
@mixin iconMenuRequiredParent($width: 21px, $thick: 2px, $interval: 6px, $color: #000, $padding: 0) {
  position: relative;
  display: block;
  margin: $thick+$interval+$padding $padding;

  &, &:before, &:after {
    width: $width;
    height: $thick;
    background-color: $color;
  }

  &:before, &:after {
    content: '';
    position: absolute;
    left: 0;
  }

  &:before {
    top: -($thick+$interval);
  }

  &:after {
    top: $thick+$interval;
  }
}

.has_bg {
  background-color: pink;
}

// 기본형
.icon_menu { 
  @include iconMenuRequiredParent(); 
}

// 예시
.icon_menu_ex1 { 
  @include iconMenuRequiredParent($width: 35px, $thick: 3px, $interval: 10px, $color: rgba(#000, 0.5), $padding: 0); 
}

.icon_menu_ex2 { 
  @include iconMenuRequiredParent($width: 40px, $thick: 5px, $interval: 10px, $color: #000, $padding: 15px);
  
  &, &:before, &:after {
    box-shadow: 0 3px 4px 0 rgba(#000, 0.5);
  }
}

.button_menu_ex3 {
  border-radius: 50%;
  background-color: #eee;
}

.icon_menu_ex3 { 
  @include iconMenuRequiredParent($width: 18px, $thick: 2px, $interval: 6px, $color: #666, $padding: 15px);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.