JavaScript 導(dǎo)航菜單是網(wǎng)站開發(fā)中非常重要的一部分，這個菜單可以用于快速導(dǎo)航到網(wǎng)站的不同部分。在這篇文章中，我們將會深入了解 JavaScript 導(dǎo)航菜單，包括如何創(chuàng)建和定制菜單、如何實現(xiàn)效果、以及如何讓菜單更加用戶友好。

首先，讓我們看看一個簡單的 JavaScript 導(dǎo)航菜單實現(xiàn)：

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>

這個菜單非常簡單，但它已經(jīng)有了一定的功能。我們可以將其作為一個現(xiàn)成的菜單模板，并繼續(xù)改進(jìn)它的其他功能。例如，我們可以添加 CSS 樣式來美化菜單，這樣可以讓菜單看起來更加美觀。下面是一個簡單的樣式示例：

#navigation {
background-color: #333;
font-size: 18px;
font-weight: bold;
margin: 0;
padding: 0;
}
#navigation li {
display: inline-block
margin: 0;
padding: 0;
}
#navigation li a {
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
}
#navigation ul {
display: none;
position: absolute;
z-index: 99999;
}
#navigation li:hover ul {
display: block;
}
#navigation ul li:hover ul {
display: block;
}
#navigation ul ul {
left: 100%;
top: 0;
}
#navigation ul li:hover {
background-color: #555;
}

此樣式將菜單變成了藍(lán)色背景色，白色字體顏色，并在鼠標(biāo)懸停時顯示下拉列表。我們還可以添加其他效果，例如在菜單中添加動畫效果，這樣可以讓菜單看起來更加生動。

除了定制和美化菜單之外，我們還可以添加其他功能來讓菜單更加用戶友好。例如，我們可以通過 JavaScript 代碼確保菜單在不同的設(shè)備和瀏覽器上呈現(xiàn)相同的效果。這樣，用戶無論在哪個設(shè)備上查看網(wǎng)站，都能夠輕松地瀏覽菜單。

function fixMenu() {
var $nav = document.querySelector('#navigation');
var $items = $nav.querySelectorAll('li');
var menuWidth = 0;
var windowWidth = window.innerWidth;
for (var i = 0; i< $items.length; i++) {
menuWidth += $items[i].offsetWidth;
}
if (menuWidth >windowWidth) {
$nav.style.width = '100%';
} else {
$nav.style.width = 'auto';
}
}
window.addEventListener('resize', fixMenu);
fixMenu();

這個 JavaScript 代碼段用來獲得菜單的寬度，然后檢查它是否超出了瀏覽器窗口的寬度。如果是，那么它就會將菜單的寬度設(shè)置為 100%，這樣用戶就可以水平滾動來查看菜單的其余部分。

在本文中，我們已經(jīng)了解了如何創(chuàng)建和定制 JavaScript 導(dǎo)航菜單，實現(xiàn)菜單的不同效果并確保菜單在不同的設(shè)備和瀏覽器上呈現(xiàn)相同的效果。如果你正在為自己的網(wǎng)站創(chuàng)建一個 JavaScript 導(dǎo)航菜單，那么本文中的一些技巧和代碼片段將能夠幫助你實現(xiàn)你所需要的功能，并可以讓你的菜單變得更加生動有趣、更加用戶友好。