實例講解css怎麼實現選單列的隱藏與展現

在網站開發中，選單列常常是網站的重要組成部分，方便使用者進行導覽和操作。然而，有時我們希望在某些情況下隱藏選單欄，例如在行動端優化時為了減少頁面佔用空間，或是製作響應式網站時，在小螢幕裝置上需要隱藏選單欄，同時在點擊漢堡按鈕時才展現出來。在本文中，我們將會介紹一些基本的 CSS 技巧，以實現選單列的隱藏與展現。

1. 利用 display 屬性控制功能表列的顯示與隱藏

display 屬性是 CSS 中一個很基礎的屬性，用來控制 HTML 元素的顯示方式。此屬性有多個參數，其中包括：block （區塊級元素）、inline （行內元素）、none（不顯示）等幾個常用值。

為了實現功能表列的隱藏，在樣式表中可以添加如下 CSS 程式碼：

.menu {
    display: none;
}

這樣，當頁面載入時，功能表列就會被隱藏起來。如果我們要在點擊漢堡按鈕時再展現選單欄，可以為該按鈕綁定事件，點擊時透過修改選單列元素的 display 屬性為 block 進行展現。程式碼範例如下：

HTML 程式碼：

<div class="menu-toggle">
  <button>Toggle Menu</button>
</div>
<nav class="menu">
  <ul>
    <li><a href="#">Menu Item 1</a></li>
    <li><a href="#">Menu Item 2</a></li>
    <li><a href="#">Menu Item 3</a></li>
  </ul>
</nav>

CSS 程式碼：

.menu {
  display: none;
}

/* 在移动端，菜单展现后将其置为 fixed 定位 */
@media screen and (max-width: 600px) {
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 2em;
    box-sizing: border-box;
    z-index: 9999;
  }
}

/* 汉堡按钮样式 */
.menu-toggle button {
  background-color: #000;
  color: #fff;
  padding: 0.6em;
  border: none;
}

/* 展开菜单时的样式 */
.menu-toggle.active + .menu {
  display: block;
}

JavaScript 程式碼：

const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
  menu.classList.toggle('active');
});

如上所示，我們利用了CSS 中的偽類選擇器:active 和JavaScript 中的classList 屬性，在點擊漢堡按鈕時為其添加.active 類，展開選單時修改選單列元素的display 屬性為block，實現選單列的展現與隱藏。

2. 透過CSS 動畫控制功能表列的滑動展現

除了利用display 屬性控制元素的顯示和隱藏外，CSS 中還有許多有趣的動畫技巧，可以幫助我們實現更流暢的展現效果。其中，利用 CSS 中的 transition 屬性，可以實現一些簡單的元素過渡效果。

具體來說，在選單列的展現中，可以為選單列元素添加過渡效果，將其從隱藏狀態轉化為展現狀態。

新增以下CSS 程式碼：

.menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background-color: #fff;
  padding: 2em;
  box-sizing: border-box;
  transition: left 0.3s ease-in-out;
}

/* 展开菜单时加上移动效果 */
.menu.active {
  left: 0;
}

在選單列元素.menu 上設定position 為fixed，使其保持固定位置，然後將left 屬性設為-100 %。這樣一來，選單列就會被隱藏在頁面左側，位於使用者螢幕外。同時，我們為選單列元素設定了一個過渡效果：當其 left 屬性發生變化時，透過 ease-in-out 的緩動效果進行過渡，以實現更為平滑的展現效果。

當點擊漢堡按鈕時，我們利用JavaScript 程式碼讓功能表列元素的left 屬性從-100% 變成0，同時將其對應的類別.active 新增至選單列元素上。程式碼範例如下：

const toggleBtn = document.querySelector('.menu-toggle button');
const menu = document.querySelector('.menu');

toggleBtn.addEventListener('click', function() {
  this.parentElement.classList.toggle('active');
  menu.classList.toggle('active');
});

在漢堡按鈕的點擊事件中，我們使用了 JavaScript 中的 classList 屬性，透過切換 .active 類，控制選單列的展現和隱藏。同時，在.menu 元素上新增了.active 類別時，選單列元素的left 屬性從-100% 變為0，透過設定的過渡效果產生了平滑的滑動效果。

總結

在網站開發的過程中，選單列的展現方式是經常要考慮的問題。利用 CSS 屬性的各種技巧，​​可以實現選單列的隱藏與滑動展現等不同的展現方式，為使用者提供更便利的操作體驗。希望本文對大家在網站開發方面有所啟發，幫助大家實現更優秀的網頁設計。

以上是實例講解css怎麼實現選單列的隱藏與展現的詳細內容。更多資訊請關注PHP中文網其他相關文章！