JavaScript是一種前端編程語言，它在網頁設計中扮演著重要的角色。它可以與HTML和CSS一起使用來實現效果，并且在導航欄設計中也非常實用。下面就來講一講JavaScript做導航欄的代碼。
在設計一個導航欄時，首先要考慮樣式。樣式決定了導航欄的呈現方式，包括字體、顏色、邊框等。在JavaScript中，可以使用style屬性來設計元素的樣式。比如，下面是一個簡單的導航欄樣式：

nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

以上代碼實現的是一個黑色背景、白色字體的導航欄。接下來，我們需要使用JavaScript來實現導航欄的交互效果。
首先，我們要設定導航欄的響應事件。在這里，我們采用鼠標經過事件來實現導航欄菜單的展開和收縮。以下是代碼：

function dropDown() {
document.getElementById("navDropDown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

以上代碼實現的是當鼠標經過菜單欄時，下面的菜單將會展開，鼠標移出菜單欄時則會收縮。同時，當用戶離開整個菜單時，展開的菜單也會被收縮起來。
接下來，我們需要實現單擊菜單項后跳轉到對應網頁的功能。在JavaScript中，可以使用事件監聽器來實現這個功能。以下是代碼：

var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}

以上代碼實現的是當用戶單擊菜單項時，當前菜單項會變為藍色（即.active類），并且頁面會跳轉到對應的網頁。
最后，我們可以把所有代碼整合到一起，形成一個完整的JavaScript導航欄代碼。使用這個代碼，我們可以輕松地創建一個網站導航欄。下面是完整代碼：

function dropDown() {
document.getElementById("navDropDown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}

綜上所述，JavaScript在導航欄制作中起著至關重要的作用。通過上面的代碼，我們可以輕松地創建出一個交互式的、美觀的導航欄。