iT邦幫忙

2025 iThome 鐵人賽
2
Modern Web

關於那些有趣的 CSS 效果系列 第 32 篇

( Day 32 ) 純 CSS 點擊展開或收折的選單

17th鐵人賽 css css教學
137 瀏覽

  • 分享至 

  • xImage
    •  

還記得「包龍星」和「方唐鏡」在公堂之上的最後一戰，隨著方唐鏡跳了出去又跳了進來，我的滑鼠也跟著按了下去又放了開來，原來是純 CSS 做成「可以點擊展開，又點擊收折」的選單呀！

純 CSS 點擊展開或收折的選單

正文開始

這篇教學會使用 HTML 的 checkbox 和 label 作為按鈕，實作可以展開或收折的選單，並進一步搭配 button 元素和美化樣式，做出可以一鍵收起和漂亮的特色選單。

CSS 教學 - 點擊展開或收折的選單

點擊後展開選單

要單純使用 CSS 實現點擊後展開選單的功能，可以藉由類型為 checkbox 的 input 元素，搭配選擇器中的「虛擬類別選擇器」和「相鄰兄弟選擇器」，就能實現勾選 checkbox 時展開選單的功能，進一步搭配 label 的 for 屬性，也能做到點擊 label 就展開選單的效果。

html >>>>
<!-- HTML 程式碼 -->
<div class="menu">
  <label for="b1">點我開啟/收折選單</label>
  <input type="checkbox" id="b1">
  <div class="submenu">
    <div>Apple</div>
    <div>Banana</div>
    <div>OXXO</div>
    <div>Orange</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  .menu {
    box-sizing: border-box;
    width: 300px;
    padding: 10px;
    margin: 20px;
    font-size: 30px;
    border: 1px solid #000;
  }
  label {cursor: pointer;}
  .submenu {display: none;}    /* 隱藏子選單 */
  /* 勾選 checkbox 時，相鄰的下一個兄弟元素 .submenu 就顯示 */
  input:checked + .submenu {
    display: block;            
  }
</style>

CSS 教學 - CSS 點擊展開或收折的選單 - 勾選 checkbox 展開選單

了解原理之後，就能隱藏 checkbox，單純透過點擊 label 展開或收折選單，搭配 transition 實現簡單的轉場效果，但需要注意如果「沒有設定子選單的高度」，會造成轉場失效的狀況，這時可以透過設定 max-height，讓子選單仍然在展開時可保持內容高度，但又具有轉場效果 ( 不過 transition 的持續時間需要設定「兩組不同時間」，才能讓展開和收折的轉場速度接近 )。

html >>>>
<!-- HTML 程式碼 -->
<div class="menu">
  <label for="b1">點我開啟/收折選單</label>
  <input type="checkbox" id="b1" class="btn">
  <div class="submenu">
    <div>Apple</div>
    <div>Banana</div>
    <div>OXXO</div>
    <div>Orange</div>
  </div>
  <label for="b2">點我開啟/收折選單</label>
  <input type="checkbox" id="b2" class="btn">
  <div class="submenu">
    <div>Apple</div>
    <div>Banana</div>
    <div>OXXO</div>
    <div>Orange</div>
  </div>
</div>

<!-- CSS 程式碼 -->
<style>
  .menu {
    box-sizing: border-box;
    width: 300px;
    margin: 20px;
    padding: 10px;
    font-size: 30px;
    border: 1px solid #000;
  }
  input {display: none;}    /* 隱藏 checkbox */
  label {cursor: pointer;}  /* 滑鼠移動到上方時為手形指標 */
  .submenu {
    overflow: hidden;       /* 超過範圍就隱藏 */
    width: 100%;            /* 寬度為父元素寬度 100% */
    max-height: 0;          /* 設定最大高度為 0，讓 transition 能有作用 */
    transition: .5s;        /* 轉場時間 0.5 秒 */
    padding-left: 10px;
    margin-bottom: 10px;
  }
  /* 勾選 checkbox 時，相鄰的下一個兄弟元素 .submenu 就顯示 */
  input:checked + .submenu {
    max-height: 500px;      /* 設定最大高度為 500px，讓 transition 能有作用 */
    transition: 1s;         /* 因為最大高度可能比內容高度高得多，所以秒數設定較多 */
  }
</style>

CSS 教學 - CSS 點擊展開或收折的選單 - 點擊後展開或收折的選單

點擊後收折全部選單

上述的範例在 checkbox「取消勾選」時會收折選單，如果要透過單一顆按鈕收折全部的選單，則可以透過類型為 reset 的 button，點擊之後就會重設 form 元素中所有的表單元素，但需要注意，使用這種方法需要將 button 和 checkbox 放在同一個 form 裡，下方範例會展示收折全部選單的效果 ( 一鍵開啟選單的效果則需要透過 JavaScript 才能順利實現 )。

線上展示：https://codepen.io/oxxo/pen/YPzbwvd

html >>>>
<!-- HTML 程式碼 -->
<form class="menu">
  <button type="reset">收折全部選單</button>
  <label for="b1">點我開啟/收折選單</label>
  <input type="checkbox" id="b1">
  <div class="submenu">
    <div>Apple</div>
    <div>Banana</div>
    <div>OXXO</div>
    <div>Orange</div>
  </div>
  <label for="b2">點我開啟/收折選單</label>
  <input type="checkbox" id="b2">
  <div class="submenu">
    <div>Apple</div>
    <div>Banana</div>
    <div>OXXO</div>
    <div>Orange</div>
  </div>
</form>

<!-- CSS 程式碼 -->
<style>
  .menu {
    box-sizing: border-box;
    width: 300px;
    margin: 20px;
    padding: 10px;
    font-size: 30px;
    border: 1px solid #000;
  }
  input {display: none;}    /* 隱藏 checkbox */
  label {cursor: pointer;}  /* 滑鼠移動到上方時為手形指標 */
  .submenu {
    overflow: hidden;       /* 超過範圍就隱藏 */
    width: 100%;            /* 寬度為父元素寬度 100% */
    max-height: 0;          /* 設定最大高度為 0，讓 transition 能有作用 */
    transition: .5s;        /* 轉場時間 0.5 秒 */
    padding-left: 10px;
    margin-bottom: 10px;
  }
  input:checked + .submenu {
    max-height: 500px;      /* 設定最大高度為 500px，讓 transition 能有作用 */
    transition: 1s;         /* 因為最大高度可能比內容高度高得多，所以秒數設定較多 */
  }
  button {
    font-size: 20px;
    display: block;
    margin: 5px 5px 10px 5px;
  }
</style>

CSS 教學 - CSS 點擊展開或收折的選單 - 點擊後收折全部選單

點擊後彈出選單

運用勾選和取消 checkbox 的做法，搭配修飾過後的選單，就能做出點擊後彈出和收起的漂亮選單，下方範例將選單都設計成圓形，並使用一些簡單的圖案符號，就能讓選單別具特色。

線上展示：https://codepen.io/oxxo/pen/ByaejPa

html >>>>
<!-- HTML 程式碼 -->
<div class="menu">
  <label for="b1">㊕</label>
  <input type="checkbox" id="b1">
  <div class="submenu">♠</div>
  <div class="submenu">♦</div>
  <div class="submenu">♣</div>
  <div class="submenu">♥</div>
</div>

<!-- CSS 程式碼 -->
<style>
  .menu {
    position: relative;
    box-sizing: border-box;
    width: 300px;
    margin: 20px;
    font-size: 30px;
  }
  input {display: none;}    /* 隱藏 checkbox */
  label {
    position: absolute;     /* label 絕對定位 */
    top: 0;
    left: 0;
    display: block;         /* 改成 block 區塊容器 */
    cursor: pointer;        /* 手形指標 */
    width: 50px;
    height: 50px;
    line-height: 50px;      /* 讓內容圖案垂直置中 */
    text-align: center;     /* 讓內容圖案水平置中 */
    border-radius: 50%;     /* 圓角 */
    background: #09f;
    color: #fff;
  }

  .submenu {
    position: absolute;     /* 所有子選單絕對定位，位置和 labe 相同 */
    top: 0;
    left: 0;
    z-index: -1;            /* 子選單放在 label 之下 */
    cursor: pointer;        /* 手形指標 */
    width: 50px;
    height: 50px;
    line-height: 50px;      /* 讓內容圖案垂直置中 */
    text-align: center;     /* 讓內容圖案水平置中 */
    border-radius: 50%;     /* 圓角 */
    color: #fff;
    opacity: 0;             /* 透明度為 0 */
  }
  .submenu:nth-of-type(1) {
    background: #f55;       /* 第一個子選單的顏色和轉場時間 */
    transition: .3s;
  }
  .submenu:nth-of-type(2) {
    background: #f90;       /* 第二個子選單的顏色和轉場時間，延遲 0.1s */
    transition: .3s .1s;
  }
  .submenu:nth-of-type(3) {
    background: #0c0;       /* 第三個子選單的顏色和轉場時間，延遲 0.2s */
    transition: .3s .2s;
  }
  .submenu:nth-of-type(4) {
    background: #f7f;       /* 第四個子選單的顏色和轉場時間，延遲 0.3s */
    transition: .3s .3s;
  }
  input:checked ~ .submenu {
    opacity: 1;             /* 顯示子選單時，透明度為 1 */
  }
  input:checked ~ .submenu:nth-of-type(1) {
    left: 120px;            /* 第一個子選單出現的位置 */
  }
  input:checked ~ .submenu:nth-of-type(2) {
    top: 50px;              /* 第二個子選單出現的位置 */
    left: 90px;
  }
  input:checked ~ .submenu:nth-of-type(3) {
    top: 90px;              /* 第三個子選單出現的位置 */
    left: 50px;  
  }
  input:checked ~ .submenu:nth-of-type(4) {
    top: 120px;             /* 第四個子選單出現的位置 */
    left: 0;
  }
</style>

CSS 教學 - CSS 點擊展開或收折的選單 - 點擊後彈出選單

小結

CSS 的點擊展開收折效果其實並不困難，最主要是透過 checkbox 和 label 搭配選擇器的應用，就可以輕鬆辦到，而且還不需要 JavaScript 的輔助喔！


上一篇
( Day 31 ) 純 CSS 的多種按鈕 hover 效果
下一篇
( Day 33 ) 純 CSS 點擊愛心圖案的放射效果
系列文
關於那些有趣的 CSS 效果 共 34 篇
  1. 30
    ( Day 30 ) 純 CSS 故障文字效果
  2. 31
    ( Day 31 ) 純 CSS 的多種按鈕 hover 效果
  3. 32
    ( Day 32 ) 純 CSS 點擊展開或收折的選單
  4. 33
    ( Day 33 ) 純 CSS 點擊愛心圖案的放射效果
  5. 34
    ( Day 34 ) 純 CSS 數字進度條 ( 會動呦 )
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
iThome鐵人賽
參賽組數
403 組
團體組數
13 組
累計文章數
2931 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 17th鐵人賽 windows php c# windows server linux css react
熱門問題
熱門回答
熱門文章
IT邦幫忙