どうも7noteです。本日作るメニューはハンバーガーです。

完成予定図

では、まずは一般的なハンバーガーメニューの作り方から。

一般的なハンバーガーメニューの作り方

index.html

<div class="menu">
  <input type="checkbox" id="check" class="hidden" >
  <label for="check" class="open"><span></span></label>
</div>

style.css

.hidden {
  display: none;
}

.open {
  width: 25px;
  height: 25px;
  display: block;
  position: relative;
  cursor: pointer;
}

.open span,
.open span:before,
.open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

.open span:before {
  bottom: 8px;
}

.open span:after {
  top: 8px;
}

#check:checked ~ .open span {
  background: rgba(255, 255, 255, 0);
}

#check:checked ~ .open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#check:checked ~ .open span::after {
  top: 0;
  transform: rotate(-45deg);
}

今回のメインはハンバーガー作りなので解説は省略します。

本物のハンバーガーメニュー

index.html

<div class="drawer">
  <input type="checkbox" id="check" class="hidden" >
  <label for="check" class="open">
    <span class="ue"></span>
    <span class="retas"></span>
    <span class="tomato"></span>
    <span class="meat"></span>
    <span class="retas"></span>
    <span class="shita"></span>
  </label>
</div>

style.css

.hidden {
  display: none;
}

.open {
  width: 25px;
  display: block;
  margin: 20px;
  position: relative;
  cursor: pointer;
}

.open span {
  content: '';
  display: block;
  width: 25px;
  background: #333;
  transition: 0.5s;

}

.open .ue {
    background: #E4AE54;
    border-radius: 10px 10px 0 0;
    height: 5px;
}
.open .retas {
    background: #98E357;
    height: 2px;
}
.open .tomato {
    background: #E34F50;
    height: 2px;
}
.open .meat {
    background: #975637;
    height: 2px;
}
.open .shita {
    background: #E4AE54;
    border-radius: 0 0 2px 2px;
    height: 3px;
}

#check:checked ~ .open span:not(.meat):not(.tomato) {
  background: rgba(255, 255, 255, 0);
}

#check:checked ~ .open .tomato {
  position: absolute;
  bottom: 5px;
  transform: rotate(45deg);
  background: #333;
}

#check:checked ~ .open .meat {
  position: absolute;
  top: 5px;
  transform: rotate(-45deg);
  background: #333;
}