前言：
隨著Web應(yīng)用的普及，越來(lái)越多的網(wǎng)站需要一個(gè)簡(jiǎn)單易用的伸縮菜單欄來(lái)展示其多項(xiàng)功能及其相關(guān)頁(yè)面。
JavaScript 伸縮菜單欄正是滿足此需求而生。本篇文章將為您詳細(xì)講解JavaScript伸縮菜單欄制作方法。
一、基礎(chǔ)概念
伸縮菜單欄是指一個(gè)簡(jiǎn)單、可擴(kuò)展及可收縮的菜單欄。這個(gè)菜單欄的開(kāi)啟和關(guān)閉由用戶點(diǎn)擊按鈕來(lái)控制。
JavaScript的伸縮菜單欄中要用到DOM（文檔對(duì)象模型）和CSS（層疊樣式表）來(lái)動(dòng)態(tài)地創(chuàng)建、改變?cè)氐臉邮胶托袨椤?br>二、伸縮菜單欄制作過(guò)程
1. HTML結(jié)構(gòu)
我們需要在HTML中創(chuàng)建一個(gè)實(shí)體菜單欄和一個(gè)菜單欄按鈕，如下所示：

<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樣式
下面給出一個(gè)大概的CSS樣式，將菜單欄縮進(jìn)瀏覽器窗口并隱藏。菜單欄按鈕采用自定義樣式：

.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邏輯
為了實(shí)現(xiàn)菜單欄的展開(kāi)和收縮，我們需要在JavaScript中添加一個(gè)事件監(jiān)聽(tīng)器。為此，我們需要定義一個(gè)變量來(lái)追蹤菜單欄的狀態(tài)。
在使用JavaScript創(chuàng)建菜單欄時(shí)，我們借助于文檔對(duì)象模型（DOM）。在DOM中，我們可以訪問(wèn)、添加、刪除、改變文檔中的元素和其內(nèi)容。
下面是完整的JavaScript代碼，它會(huì)根據(jù)點(diǎn)擊按鈕的狀態(tài)打開(kāi)或關(guān)閉菜單欄：

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;
}
});

三、實(shí)際應(yīng)用場(chǎng)景
在實(shí)際應(yīng)用中，我們可以通過(guò)增加CSS樣式、修改JavaScript邏輯或添加新元素來(lái)定制菜單欄，以滿足不同的需求。
比如，我們可以通過(guò)改變菜單欄的方向或顏色來(lái)增加美感和風(fēng)格。我們還可以通過(guò)向菜單欄中添加圖標(biāo)、子菜單或重復(fù)的元素來(lái)增加其交互和可視化性。
下面是一個(gè)其他元素添加和調(diào)整至菜單欄的實(shí)例：
HTML結(jié)構(gòu)：

<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);

代碼更新：我們?cè)诓藛螜谥刑砑恿艘粋€(gè)名為"Services"的子菜單，向其添加了關(guān)于網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)的鏈接。
四、總結(jié)
JavaScript 編寫伸縮菜單欄十分簡(jiǎn)單，只需要使用文檔對(duì)象模型和相應(yīng)的CSS效果即可。通過(guò)對(duì)HTML、CSS和JavaScript進(jìn)行必要的調(diào)整，菜單欄還可以變得更加炫酷。不管是用于我們自己的網(wǎng)站還是為客戶的網(wǎng)站進(jìn)行設(shè)計(jì)，JavaScript伸縮菜單欄都是一個(gè)非常有用且易于實(shí)現(xiàn)的解決方案。