在現代網頁設計中，JavaScript 垂直菜單是一個非常常見的元素。由于其美觀、交互性強以及易于實現和維護，JS垂直菜單已經成為了網頁設計者們不可或缺的工具。在本文中，我們將一起來了解如何利用JS來制作垂直菜單。 首先，讓我們來看一下最基本的JS垂直菜單代碼：

<script>
function menu(id) {
var x = document.getElementById(id);
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
</script>
<div class="menu" id="myMenu">
<a href="#" class="menu-icon" onclick="menu('myMenu')">
<i class="fa fa-bars"></i>
</a>
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</div>

在這段代碼中，我們首先定義了一個函數 `menu`，用于控制菜單的顯示和隱藏。具體來說，這個函數的邏輯是：如果當前菜單的 `class` 為 `"menu"`，那么將其 `class` 值改為 `"menu responsive"`，這樣菜單將會變得可見；如果當前菜單的 `class` 值不為 `"menu"`，那么將其 `class` 值改回 `"menu"`，這樣菜單將會隱藏起來。接下來，我們在一個 `div` 元素中定義了菜單的內容，并給該元素設置了一個 `id`，方便在函數調用時引用之。 下面，我們來看一下如何利用CSS為菜單添加樣式：

.menu {
background-color: #333;
overflow: hidden;
width: 100%;
padding: 10px 0;
}
.menu a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu a:hover {
background-color: #ddd;
color: #333;
}
.menu .menu-icon {
display: none;
}
@media screen and (max-width: 600px) {
.menu a:not(:first-child) {
display: none;
}
.menu .menu-icon {
display: block;
position: absolute;
right: 0;
top: 0;
}
}
.responsive {
position: relative;
}
.responsive .menu-icon {
position: absolute;
right: 0;
top: 0;
}
.responsive a {
display: block;
text-align: left;
}

在這段代碼中，我們首先定義了菜單元素 `.menu` 的樣式，包括背景色、寬度、內邊距等等。接下來，我們為每個菜單項定義了樣式，包括字體顏色、內邊距等等，并在菜單項懸停時加上了背景顏色，以提高可讀性。然后，在媒體查詢中，我們設定了菜單在小屏幕設備上的樣式，具體包括隱藏所有菜單項（除了第一個）和顯示菜單圖標。最后，我們定義了 `.responsive` 樣式，當菜單被展開時將被應用，此時菜單圖標將保持在屏幕頂部，并按照左對齊的方式顯示菜單項。 雖然這個JS垂直菜單已經非常簡單和有效，但我們還可以通過添加更多功能來增強其表現力，讓其更加靈活適用。比如，我們可以為菜單的每個選項添加圖標、下拉菜單、二級菜單等等。 總之，JS垂直菜單是一個非常有用的元素，能夠為網頁設計師們提供更加靈活和美觀的設計方案。對于初學者來說，學習如何使用JS來制作垂直菜單，無疑是一個非常好的開始。希望本文能夠幫助到大家！