免JS！純CSS就可打造出，開合式的漢堡選單功能

前言

選單一直是製作網頁最基本的功能需求之一，因此對於許多的套件內建都會提供選單的功能，且這些滑動式選單，大部分都是透過 Javascript 所製作而成，最主要的原因就在於，透過 Javascript 可以精準的知道，目前使用是點選開啟還是關閉。

而最近發現一個超酷的寫法，直接透過 HTML 中的核許框，就可判斷目前是開啟還是關閉，再搭配 CSS 就可實作出展開與收合，甚至連漢堡選單的那圖示，也可透過 CSS 繪製出來，且當選單開啟時，還可透過動畫將選單變叉叉的圖示，因此現在就一塊來看看，如何透過純 CSS 打造出開合式漢堡選單吧！

做法

1. 加入以下的 HTML 架構

首先，先在HTML中加入以下的HTML架構。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<nav class="nav-box">
  <input type="checkbox" id="menu">
  <label for="menu" class="line">
    <div class="menu"></div>
  </label>

  <div class="menu-list">
    <ul>
      <li>選單1</li>
      <li>選單2</li>
      <li>選單3</li>
    </ul>
</div>
</nav>

2. 加入 CSS 設定漢堡選單的圖示

接著再透過CSS來設定漢堡選單的圖示。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/*
選單線
*/
.line {
  width: 24px;
  height: 24px;
  background: #FFF;
  cursor: pointer;
  display: block;
  padding: 16px;
  position: fixed;
  z-index: 2;
}
.line .menu,
.line .menu::before,
.line .menu::after {
  background: #222;
  content: '';
  display: block;
  height: 1px;
  position: absolute;
  transition: background ease .15s, top ease .15s .15s, transform ease .15s;
  width: 20px;
}
.line .menu {
  left: 18px;
  top: 27px;
}

.line .menu::before {
  top: -6px;
}

.line .menu::after {
  top: 6px;
}

3. 加入 :checked 屬性的判斷

接著再透過 :checked 的屬性，來判斷目前為開啟狀態，當選單開啟時，原來的三條線就變成叉叉。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
/*
點選選單變叉叉
*/
#menu:checked + .line .menu {
  background: transparent;
}

#menu:checked + .line .menu::before {
  transform: rotate(45deg);
}

#menu:checked + .line .menu::after {
  transform: rotate(-45deg);
}

#menu:checked + .line .menu::before,
#menu:checked + .line .menu::after {
  top: 0;
  transition: top ease .15s, transform ease .15s .15s;
}

4. 設定開合樣式

當選單按鈕處理好後，一樣用 :checked 來設定選單展開(200px)與收合(60px)。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*
選單開合
*/
#menu:checked ~ .menu-list {
  width: 200px;
}

.menu-list {
  width: 60px;
  height: 100vh;
  background: #FFF;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
  padding-top: 60px;
  position: fixed;
  z-index: 1;
  transition: all .3s;
  overflow: hidden;
}

/*
選單向外推
*/
.menu-list ul {
    list-style: none;
    margin-left:70px;
    padding: 0;
}
.menu-list ul>li{
    display:block;
    width:100px;
}