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