前言：
隨著Web應用的普及，越來越多的網站需要一個簡單易用的伸縮菜單欄來展示其多項功能及其相關頁面。
JavaScript 伸縮菜單欄正是滿足此需求而生。本篇文章將為您詳細講解JavaScript伸縮菜單欄制作方法。
一、基礎概念
伸縮菜單欄是指一個簡單、可擴展及可收縮的菜單欄。這個菜單欄的開啟和關閉由用戶點擊按鈕來控制。
JavaScript的伸縮菜單欄中要用到DOM（文檔對象模型）和CSS（層疊樣式表）來動態地創建、改變元素的樣式和行為。
二、伸縮菜單欄制作過程
1. HTML結構
我們需要在HTML中創建一個實體菜單欄和一個菜單欄按鈕，如下所示：

<nav class="nav-container">
<ul class="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav> 
<button class="nav-toggler">Toggle Menu</button>

2. CSS樣式
下面給出一個大概的CSS樣式，將菜單欄縮進瀏覽器窗口并隱藏。菜單欄按鈕采用自定義樣式：

.nav-container {
width: 100%;
height: 60px;
background-color: #fff;
position: absolute;
top: 0;
left: 100%;
}
.nav-menu {
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nav-menu li {
list-style: none;
margin-right: 30px;
}
.nav-menu li a {
color: #093a58;
text-decoration:none;
font-size: 16px;
font-weight: 600;
}
.nav-toggler {
position: absolute;
right: 15px;
top: 15px;
outline: none;
background: none;
border: none;
font-size: 20px;
color: #0e6aff;
}

3. JavaScript邏輯
為了實現菜單欄的展開和收縮，我們需要在JavaScript中添加一個事件監聽器。為此，我們需要定義一個變量來追蹤菜單欄的狀態。
在使用JavaScript創建菜單欄時，我們借助于文檔對象模型（DOM）。在DOM中，我們可以訪問、添加、刪除、改變文檔中的元素和其內容。
下面是完整的JavaScript代碼，它會根據點擊按鈕的狀態打開或關閉菜單欄：

let navContainer = document.querySelector(".nav-container");
let navToggler = document.querySelector(".nav-toggler");
let isVisible = false;
navToggler.addEventListener("click", function() {
if (!isVisible) {
navContainer.style.left = "0";
isVisible = true;
} else {
navContainer.style.left = "100%";
isVisible = false;
}
});

三、實際應用場景
在實際應用中，我們可以通過增加CSS樣式、修改JavaScript邏輯或添加新元素來定制菜單欄，以滿足不同的需求。
比如，我們可以通過改變菜單欄的方向或顏色來增加美感和風格。我們還可以通過向菜單欄中添加圖標、子菜單或重復的元素來增加其交互和可視化性。
下面是一個其他元素添加和調整至菜單欄的實例：
HTML結構：

<nav class="nav-container">
<ul class="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="has-child"><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<div class="social-buttons">
<a class="facebook" href="#"><i class="fa fa-facebook"></i></a><br>
<a class="twitter" href="#"><i class="fa fa-twitter"></i></a><br>
<a class="instagram" href="#"><i class="fa fa-instagram"></i></a><br>
</div>
</ul> 
</nav>
<button class="nav-toggler">Toggle Menu</button>

CSS樣式：

.nav-menu li {
list-style: none;
margin-right: 30px;
}
.social-buttons {
position: absolute;
top: 70px;
left: 80%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.social-buttons a {
margin-bottom: 10px;
}
.facebook {
background-color: #3b5998;
color: #ffffff;
padding: 10px;
border-radius: 50%;
}
.twitter {
background-color: #38a1f3;
color: #ffffff;
padding: 10px;
border-radius: 50%;
}
.instagram {
background-color: #c62a89;
color: #ffffff;
padding: 10px;
border-radius: 50%;
}

JavaScript邏輯：

let navContainer = document.querySelector(".nav-container");
let navToggler = document.querySelector(".nav-toggler");
let isVisible = false;
navToggler.addEventListener("click", function() {
if (!isVisible) {
navContainer.style.left = "0";
isVisible = true;
} else {
navContainer.style.left = "100%";
isVisible = false;
}
});
let services = document.querySelector(".has-child");
let servicesMenu = document.createElement("ul");
servicesMenu.innerHTML = "<li><a href='#'>Web Design</a></li><li><a href='#'>Web Development</a></li>";
services.appendChild(servicesMenu);

代碼更新：我們在菜單欄中添加了一個名為"Services"的子菜單，向其添加了關于網頁設計和開發的鏈接。
四、總結
JavaScript 編寫伸縮菜單欄十分簡單，只需要使用文檔對象模型和相應的CSS效果即可。通過對HTML、CSS和JavaScript進行必要的調整，菜單欄還可以變得更加炫酷。不管是用于我們自己的網站還是為客戶的網站進行設計，JavaScript伸縮菜單欄都是一個非常有用且易于實現的解決方案。