JavaScript 作為前端開發不可或缺的一部分，擁有著廣泛的應用場景。其中，使用 JavaScript 來制作網頁菜單是非常常見的需求之一。下面，本文將著重介紹如何運用 JavaScript 將一個漂亮實用的菜單制作出來。

首先，JavaScript 可以通過創建一個數組來保存菜單的內容。比如：

var menuArray = [
{
id: 1,
title: "首頁",
url: "index.html"
},
{
id: 2,
title: "產品",
url: "product.html"
},
{
id: 3,
title: "服務",
url: "service.html"
}
];

以上代碼創建了一個名為menuArray的數組，其中每個元素都包含了菜單項的 id、標題和 URL。此時，我們可以通過 JavaScript 動態地將菜單內容渲染到網頁上。

接下來，我們可以通過創建一個函數來動態構造菜單 HTML。例如：

function createMenu() {
var menu = "";
for (var i = 0; i < menuArray.length; i++) {
menu += '<li><a href="' + menuArray[i].url + '">' + menuArray[i].title + '</a></li>';
}
document.getElementById("menu").innerHTML = menu;
}

以上代碼創建了一個名為createMenu的函數，該函數通過遍歷數組創建了一個 HTML 字符串，其中包含了每個菜單項的標題和 URL。最后，該函數將 HTML 字符串插入到菜單容器的innerHTML中，即實現了菜單的動態生成。

接著，我們可以通過一些 CSS 樣式來美化菜單的外觀。例如：

#menu {
list-style: none;
margin: 0;
padding: 0;
background-color: #f7f7f7;
border: 1px solid #ccc;
border-radius: 5px;
}
#menu li {
display: inline-block;
}
#menu li a {
display: block;
padding: 10px 20px;
color: #333;
text-decoration: none;
border-right: 1px solid #ccc;
}
#menu li:last-child a {
border-right: none;
}
#menu li a:hover {
background-color: #e4e4e4;
}

以上 CSS 樣式通過修改菜單容器、菜單列表項及其鏈接樣式的方式，來實現了一個簡潔美觀的菜單外觀。

最后，我們可以將生成菜單的函數綁定到頁面加載事件上，讓頁面加載時自動創建菜單。例如：

window.onload = function() {
createMenu();
}

以上代碼簡單地將生成菜單的函數綁定到了頁面加載事件上，頁面加載完成后即可自動創建菜單。

綜上，使用 JavaScript 制作一個實用漂亮的菜單并不難。將菜單內容保存在一個數組中，通過動態構造 HTML 和 CSS 樣式來實現菜單的動態生成和美化。最后，將生成菜單的函數綁定到頁面加載事件上即可實現頁面加載時自動創建菜單。希望這篇文章能夠為大家帶來一點點幫助。