如何使用CSS繪製一個漢堡式選單

王铁柱6發表於2024-11-30
CSS

使用 CSS 繪製漢堡式選單圖示，通常用三個水平線表示，可以透過以下幾種方法實現：

1. 使用三個 <div> 元素:

這是最直觀的方法，使用三個 div 分別代表三條橫線，然後透過 CSS 設定它們的樣式。

<div class="hamburger-menu">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

.hamburger-menu {
  width: 30px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer; /* 新增滑鼠指標樣式 */
}

.bar {
  width: 100%;
  height: 3px;
  background-color: black; /* 設定顏色 */
  border-radius: 2px; /* 可選：新增圓角 */
  transition: transform 0.3s ease-in-out; /* 新增動畫效果 */
}

2. 使用偽元素 ::before 和 ::after:

這種方法更簡潔，只需一個 div 元素，利用 ::before 和 ::after 偽元素建立另外兩條線。

<div class="hamburger-menu"></div>

.hamburger-menu {
  width: 30px;
  height: 3px;
  background-color: black;
  position: relative;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.3s ease-in-out;
}

.hamburger-menu::before,
.hamburger-menu::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: black;
  border-radius: 2px;
  transition: transform 0.3s ease-in-out;
}

.hamburger-menu::before {
  top: -8px;
}

.hamburger-menu::after {
  bottom: -8px;
}

3. 使用 SVG:

使用 SVG 可以建立更靈活、更易於縮放的圖示。

<svg width="30" height="20" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="30" height="3" fill="black"/>
  <rect y="7" width="30" height="3" fill="black"/>
  <rect y="14" width="30" height="3" fill="black"/>
</svg>

新增互動動畫 (例如，點選變換成 "X")：

以上程式碼片段都包含了 transition 屬性，方便新增動畫。 你需要在 JavaScript 或 CSS 中新增點選事件處理程式，並修改 CSS 類或樣式來實現動畫效果。 例如，可以使用一個類來表示啟用狀態，並修改 transform: rotate(45deg) 等屬性來實現 "X" 形狀。

選擇哪種方法取決於你的具體需求和專案。 偽元素方法通常更簡潔，而 SVG 方法更靈活，尤其是在需要縮放或更復雜的動畫時。 使用三個 div 的方法最直觀易懂，方便初學者理解。 記得根據你的設計調整顏色、大小和間距。

相關文章