JavaScript 菜單欄簡介

JavaScript 菜單欄是一個很常見的 UI 元素，它可以讓用戶在網頁上快速導航到不同的內容和功能。在這篇文章中，我們將會討論如何使用 JavaScript 和 HTML/CSS 制作一個簡單的垂直菜單欄。

制作垂直菜單欄

首先，在 HTML 文件中定義一個列表，每個列表項都代表一個菜單項。例如：

<ul>
<li>菜單項 1</li>
<li>菜單項 2</li>
<li>菜單項 3</li>
<li>菜單項 4</li>
</ul>

然后，在 CSS 文件中定義這個列表項的樣式，包括它們的樣式、字體、顏色等等。例如：

ul {
list-style:none;
padding:0;
}
li {
font-family: Arial, sans-serif;
font-size:16px;
color:#333;
margin-bottom:10px;
}

接下來，我們需要使用 JavaScript 來添加交互性。例如，在用戶點擊菜單項時，我們希望它變為選中狀態，并在頁面上展示相關的內容。我們可以給每個菜單項添加一個 onclick 事件處理函數：

var menuItems = document.getElementsByTagName('li');
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].onclick = function() {
// 去除所有菜單項的選中狀態
for (var j = 0; j < menuItems.length; j++) {
menuItems[j].classList.remove('selected');
}
// 將當前點擊的菜單項設置為選中狀態
this.classList.add('selected');
// 顯示相關內容
var content = document.getElementById(this.textContent);
content.style.display = 'block';
};
}

在這個例子中，我們使用了 classList API 來添加或移除 CSS 類名，“selected” 表示當前選中的菜單項。

增強菜單欄

我們可以進一步增強菜單欄的功能和樣式。例如，當用戶將鼠標懸停在菜單項上時，我們可以改變它的背景顏色：

li:hover {
background-color: #f5f5f5;
}

如果菜單欄很長，用戶需要拖動滾動條來查看所有菜單項，這會影響用戶體驗。為了解決這個問題，我們可以添加一個“回到頂部”按鈕，讓用戶可以快速回到頂部。例如：

var backButton = document.getElementById('back-to-top');
backButton.onclick = function() {
window.scrollTo(0, 0);
};

這個例子中，我們使用了 window.scrollTo() 方法來滾動頁面，x 和 y 參數分別表示水平和垂直方向上的滾動距離。

總結

JavaScript 菜單欄是一個很實用和常見的 UI 元素，它可以讓用戶快速導航到不同的內容和功能。在這篇文章中，我們學習了如何使用 JavaScript 和 HTML/CSS 制作一個簡單的垂直菜單欄，以及如何增強它的交互和樣式。希望這篇文章可以為你的前端開發工作提供幫助。