今天要來講響應式網頁出現頻率超高的漢堡選單啦，
先來科普一下為什麼叫漢堡選單？
照維基百科的說法，
純粹就是覺得外觀長得跟漢堡相似（哪裡像），
他有放一個對照圖，可以去維基看，附上連結。

那我們就來進入正題吧～

本篇關鍵字

其實跟昨天的差不多，但我還是列一下

• <input type="checkbox">
• label
• position: absolute

範例檔

HTML

<input type="checkbox" id="navbarToggle">
<header class="main-header">
  <div class="container">
    <h1><a href="#">Zombie@Dump</a></h1>
    <nav>
      <ul class="main-menu">
        <li><a href="#">關於我們</a></li>
        <li><a href="#">作品們</a></li>
        <li><a href="#">聯絡我們</a></li>
      </ul>
    </nav>
    <label class="navbarToggle" for="navbarToggle"><span></span></label>
  </div>
</header>

CSS

a {
  display: block;
  text-decoration: none;
  color: #fff;
}

.main-header {
  width: 100%;
  background-color: rgb(232, 48, 21);
  transition: 1s;
  position: relative;
}

#navbarToggle {
  display: none;
}

.container {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-header h1 {
  line-height: 60px;
  margin: 0 15px;
}

.main-menu {
  position: relative;
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
  background-color: rgb(232, 48, 21);
  text-align: center;
  display: none;
}

#navbarToggle:checked~.main-header .main-menu {
  display: block;
}

.main-menu li {
  transition: .5s;
}

.main-menu li a {
  padding: 0 15px;
  line-height: 60px;
}

.main-menu li:hover {
  background-color: rgb(176, 41, 20);
}

.navbarToggle {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  position: relative;
  border-radius: 4px;
}

.navbarToggle span {
  width: 70%;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: .5s;
}

.navbarToggle span::before,
.navbarToggle span::after {
  content: '';
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  transition: .5s;
}

.navbarToggle span::before {
  top: -10px;
}

.navbarToggle span::after {
  bottom: -10px;
}

#navbarToggle:checked~.main-header .navbarToggle span {
  background-color: transparent;
}

#navbarToggle:checked~.main-header .navbarToggle span::before {
  top: 0;
  transform: rotate(45deg);
}

#navbarToggle:checked~.main-header .navbarToggle span::after {
  top: 0;
  transform: rotate(135deg);
}

喪屍分解

• 利用 <input type="checkbox"> 的 :checked 來製作出收合的開關
• 點擊 label 可以觸發 input 被選取，要注意的是 label 中的 for 的名稱，要跟 input 的 id 相同才能被連動
• 使用 親代選取器，要注意 <input type="checkbox"> 放置的位置，附上選取器說明
• 利用position: absolute 將 .main-menu 定位到 .main-header 下方，.main-menu寬度設定為width: 100%，要定位的父層設定 position: relative
• 使用 span 製作出漢堡的其中一槓，再利用 ::before、::after 做出上下兩槓，再搭配 transform: rotate 做出 X 動畫

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是交錯漂浮版。