今天一樣要講的是 金魚都能懂的網頁切版 : 多層次收合選單 NO015，
昨天講了多層次選單的部分，
今天要來講收合的部分啦～

本篇關鍵字

• <input type="checkbox">
• label
• 親代選取器

範例檔

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>
            <ul class="sub-menu">
              <li><a href="#">作品一</a></li>
              <li><a href="#">作品二</a></li>
              <li><a href="#">作品三</a></li>
              <li><a href="#">作品四</a></li>
              <li><a href="#">作品五</a></li>
            </ul>
          </li>
          <li><a href="#">聯絡我們</a></li>
        </ul>
      </nav>
      <label for="navbarToggle"><span class="material-icons">expand_more</span></label>
    </div>
  </header>

CSS

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

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

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

#navbarToggle {
  display: none;
}

#navbarToggle:checked~.main-header {
  transform: translateY(0);
}

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

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

.main-menu {
  display: flex;
  position: relative;
}

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

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

.main-menu>li::after {
  content: '';
  position: absolute;
  height: 4px;
  left: 50%;
  right: 50%;
  bottom: 0;
  background-color: #fff;
  transition: .5s;
}

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

.main-menu>li:hover::after {
  left: 0;
  right: 0;
}

.sub-menu {
  position: absolute;
  left: 50%;
  background-color: rgba(232, 48, 21, 0.8);
  width: 150%;
  text-align: center;
  transform: translateX(-50%);
  display: none;
}

.main-menu li:hover .sub-menu {
  display: block;
}

label {
  color: #fff;
  display: inline-block;
  background-color: rgb(232, 48, 21);
  position: absolute;
  bottom: 0;
  right: 20px;
  transform: translateY(100%);
  border-radius: 0 0 6px 6px;
  cursor: pointer;
}

.material-icons {
  transform: rotate(0);
  transition: .6s;
}

#navbarToggle:checked~.main-header .material-icons {
  transform: rotate(180deg);
}

喪屍分解

• 利用 <input type="checkbox"> 的 :checked 來製作出收合的開關
• 點擊 label 可以觸發input 被選取，要注意的是 label 中的 for 的名稱，要跟 input 的 id 相同才能被連動
• 使用 親代選取器，要注意 <input type="checkbox"> 放置的位置，附上選取器說明
• 使用 position: absolute 將開關定位到 .main-header下方
• 使用 transform: rotate 做出開關旋轉的效果
• 這次使用 material icon

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是 Navbar - 漢堡選單。