HTML導(dǎo)航折疊是一種非常實(shí)用的功能，它能夠?qū)⒕W(wǎng)頁上的導(dǎo)航菜單進(jìn)行隱藏和展示，使得頁面更加美觀簡潔。下面介紹如何實(shí)現(xiàn)HTML導(dǎo)航折疊代碼。 首先，在HTML代碼中定義導(dǎo)航菜單，使用無序列表（ul）和列表項(xiàng)（li）元素來創(chuàng)建導(dǎo)航菜單。

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

然后，使用CSS樣式設(shè)置導(dǎo)航菜單的樣式。

nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: #333;
text-decoration: none;
}
nav a:hover {
color: #666;
}

最后，通過JavaScript代碼實(shí)現(xiàn)導(dǎo)航菜單的折疊和展開。

var nav = document.querySelector('nav');
var menuToggle = document.querySelector('#menu-toggle');
menuToggle.addEventListener('click', function() {
nav.classList.toggle('active');
});

以上代碼將導(dǎo)航菜單的樣式設(shè)置為無序列表，并將列表項(xiàng)設(shè)置為行內(nèi)塊元素，使得導(dǎo)航菜單橫向排列。通過JavaScript代碼，當(dāng)點(diǎn)擊菜單按鈕時(shí)，使用classList.toggle()方法為導(dǎo)航菜單添加或移除active類名，從而實(shí)現(xiàn)導(dǎo)航菜單的折疊和展開。 以上就是HTML導(dǎo)航折疊的實(shí)現(xiàn)方法，可以讓網(wǎng)頁更加美觀簡潔，也更加易于用戶操作。