iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 11
0
Modern Web

喪屍黑白切系列 第 11

Day 11 | 我包你啊你包我 - 多層次選單

今天要講的是 金魚都能懂的網頁切版 : 多層次收合選單 NO015
不過我要講的只有多層次選單的 part,
收合的部分計畫明天再來打。

本篇關鍵字

  • ulli
  • position: absolute
  • transform: translate()
  • z-index
  • 子代選取器

範例檔

HTML

  <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>
    </div>
  </header>

CSS
(跟昨天的長得差不多,我只放有修改以及新增的部分)

.main-menu {
  display: flex;
  position: relative; /* 多這一行 */
}

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

/* 原本為 .main-menu li:hover::after */
.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: translate(-50%, -150%);
  transition: .8s;
  z-index: -1;
}

.main-menu li:hover .sub-menu {
  transform: translate(-50%, 0);
}

喪屍分解

  • li 中多包一層 ul,製作下層選單
  • 利用 position: absolute.sub-menu 獨立出一層來
  • 使用 子代選取器::after 只會出現在第一層子層
    子代選取器教學
  • 使用 transform: translate() 設定選單位置以及做出選單滑下來的效果
  • 設定 z-index: -1.sub-menu 的層往後放,否則會蓋在 .main-header 上面

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


上一篇
Day 10 | 我常卡住的導覽列 - Navbar
下一篇
Day 12 | 看我伸縮自如的...選單
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言