CSS中如何優(yōu)雅地寫下拉菜單

在CSS中，我們可以通過一些簡單的方法來實現(xiàn)優(yōu)雅的下拉菜單，下拉菜單通常用于展示一系列可供用戶選擇的選項，如導航菜單、顏色選擇器或字體選擇器等。

我們需要創(chuàng)建一個包含所有選項的列表，這個列表可以是一個有序列表（<ol>）或無序列表（<ul>），具體取決于你的需求，我們可以創(chuàng)建一個包含幾個選項的無序列表：

<ul id="dropdown-menu">
  <li>選項1</li>
  <li>選項2</li>
  <li>選項3</li>
  <li>選項4</li>
  <li>選項5</li>
</ul>

我們可以使用CSS來隱藏這個列表，并只顯示一個激活的菜單項，為了實現(xiàn)這一點，我們可以使用:focus偽類來聚焦激活的菜單項，并使用position: absolute將其定位到合適的位置。

#dropdown-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 1000;
  transition: height 0.3s ease;
}
#dropdown-menu:focus {
  height: auto;
}
#dropdown-menu li {
  list-style-type: none;
}

在這個例子中，我們使用了transition屬性來平滑地過渡高度變化，使得下拉菜單的顯示更加自然，我們還使用了z-index屬性來確保下拉菜單始終顯示在其他內容之上。

我們可以使用JavaScript來監(jiān)聽用戶的點擊事件，并激活相應的菜單項，我們可以使用以下代碼來激活***個菜單項：

document.getElementById('dropdown-menu').addEventListener('click', function(event) {
  var li = event.target;
  if (li.nodeName == 'LI') {
    var ul = li.parentNode;
    ul.style.height = '0';
    li.style.backgroundColor = 'red'; // 激活的菜單項背景色變?yōu)榧t色
    var nextLi = li.nextElementSibling;
    if (nextLi) {
      nextLi.style.backgroundColor = 'transparent'; // 其他菜單項背景色恢復透明
    } else {
      ul.style.height = 'auto'; // 如果已經(jīng)是***后一個菜單項，則恢復列表高度
    }
  } else {
    ul.style.height = 'auto'; // 如果點擊的是其他位置，則恢復列表高度
  }
});

在這個例子中，我們使用JavaScript來監(jiān)聽用戶的點擊事件，并根據(jù)點擊的位置來激活相應的菜單項，我們還使用CSS來設置激活的菜單項和其他菜單項的樣式。