JavaScript隱藏選單
在這個數位化時代，網站已經成為人們獲取資訊、交流溝通的重要途徑之一。為了提高使用者的使用體驗，網站設計也越來越注重互動性和實用性。為此，選單列的設計也成為網站設計的一個重要組成部分。但是，有時候選單列過於繁瑣，會佔據大量的頁面空間，造成使用者不便和壓迫感。因此，隱藏式選單的出現也成為了設計師們解決這個問題的有效方法之一。
隱藏選單可以在使用者不需要時隱藏，需要時再展開。透過這種方式，隱藏選單不但可以節省頁面空間，而且可以更好地進行資訊分類。因此，出現隱藏式選單的網站也越來越多。隱藏選單的實作方式有很多，本文將介紹一種基於JavaScript的隱藏選單實作方法。
一、HTML結構
首先，我們需要在頁面中定義一個選單欄，如下所示：
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>這是一個簡單的選單欄，包含四個選項：Home、Blog、Work和Contact。我們將使用JavaScript來隱藏這個選單列。
二、CSS樣式
在隱藏選單之前，我們需要先定義CSS樣式。我們可以隱藏選單項目的display屬性，如下所示：
nav ul {
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:row;
justify-content:flex-end;
}
nav ul li {
margin:0 10px;
}
nav ul li a {
color:#333;
text-decoration:none;
}
.hidden-menu {
display:none;
}這些CSS樣式用來設定選單項目的樣式和隱藏選單的樣式。其中，隱藏選單的樣式為display:none，這是隱藏選單的關鍵。
三、JavaScript實作
現在，我們可以開始透過JavaScript來實作隱藏選單了。我們需要在選單列中新增一個按鈕，當使用者點擊這個按鈕時，選單列就會消失。點擊按鈕之後，我們會透過JavaScript來切換功能表列的顯示狀態。實作這個功能需要用到JavaScript的addEventListener方法監聽按鈕的點擊事件。
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button id="menu-button">Menu</button>
</nav>在選單列的程式碼中，我們加入了一個button元素，並設定了它的id屬性為「menu-button」。現在，我們可以開始寫JavaScript程式碼了。我們需要透過取得這個按鈕元素，並在按鈕被點擊時切換選單列的顯示狀態。我們可以透過以下程式碼來完成這個步驟：
const button = document.getElementById("menu-button");
const menu = document.querySelector("nav ul");
button.addEventListener("click", () => {
menu.classList.toggle("hidden-menu");
});這段JavaScript程式碼用於取得按鈕元素和功能表列元素，並在按鈕被點擊時切換功能表列的狀態。我們使用了classList.toggle方法來切換功能表列的class屬性，從而實現功能表列的隱藏與顯示。
四、調整CSS樣式
在程式碼完成之後，我們需要對CSS樣式進行調整，以便隱藏選單的效果更符合實際需求。在預設情況下，功能表列的初始狀態應該是隱藏的，只有在使用者點擊按鈕後才會顯示。因此，我們需要對功能表列的預設狀態進行調整。我們只需要將選單列的display屬性設為none，就可以將其在預設情況下設定為隱藏狀態，如下所示：
nav ul {
display:none;
flex-direction:row;
justify-content:flex-end;
}
.hidden-menu {
display:flex;
}這樣，當使用者載入網頁時，選單列就會預設為隱藏狀態，只有在使用者點擊按鈕之後才會顯現。
五、實作效果
現在，我們已經完成了JavaScript隱藏選單的實作。接下來，我們一起來看看實作效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript隐藏菜单</title>
<style>
nav ul {
display:none;
flex-direction:row;
justify-content:flex-end;
list-style:none;
margin:0;
padding:0;
}
nav ul li {
margin:0 10px;
}
nav ul li a {
color:#333;
text-decoration:none;
}
.hidden-menu {
display:flex;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button id="menu-button">Menu</button>
</nav>
<script>
const button = document.getElementById("menu-button");
const menu = document.querySelector("nav ul");
button.addEventListener("click", () => {
menu.classList.toggle("hidden-menu");
});
</script>
</body>
</html>在這個範例中，當使用者載入網頁時，選單列會預設為隱藏狀態。只有在使用者點擊按鈕後，選單列才會出現，如下圖所示：
#如果再次點擊按鈕，選單列就會恢復到隱藏狀態。
六、延伸應用
透過這個方法，我們可以實現簡單的隱藏選單效果。但是，如果選單列中的選項過多，隱藏選單就無法完全滿足我們的需求，這時候我們可以使用響應式設計來解決這個問題。透過響應式設計，我們可以在不同的裝置上展現不同的選單欄，如在手機上，我們可以使用下拉式選單展示所有選項。這種方法可以更好地適應不同設備的需求，提高使用者體驗。
以上是javascript隱藏菜單的詳細內容。更多資訊請關注PHP中文網其他相關文章！
