加入目錄及選單

<input type="checkbox" id="click-menu" />

<label for="click-menu" class="menu"> MENU </label>

<div class="list-w">
  <ul class="list">
    <li class="item">
      <a class="list-link" href=" ">
        <p class="list-text"> Instagram </p>
      </a>
    </li>
    <li class="item">
      <a class="list-link" href=" ">
        <p class="list-text"> Spotify </p>
      </a>
    </li>
  </ul>
</div>

這裡希望點擊MENU字樣後出現選單，想要有這種互動效果可以用button或者checkbox元素來實現，這裡我選擇用label連結checkbox，之後再將checkbox隱藏來達到互動效果。

最後，加上點擊後選單出現的效果，這裡要注意一下表示checkbox沒有選取時是不能用:unchecked的，需要用:not(:checked)。

/* 隱藏checkbox */
#click-menu{
  display: none;
}
#click-menu:checked ~ * .list {
  visibility: visible;
}
#click-menu:not(:checked) ~ * .list {
  visibility: collapse;
}

參考資料/延伸閱讀

1. medium
2. MDN-:checked
3. MDN-:not