<div> 伸縮菜單是一種常見的網頁設計中的元素，可以方便地隱藏或顯示特定內容。通過設置 CSS 屬性 display 的值為 none 或 block，我們可以使用 JavaScript 輕松地控制這些菜單。下面將詳細介紹<div> 伸縮菜單的使用以及幾個代碼案例。
<div> 伸縮菜單的基本原理是通過改變元素的display屬性來隱藏或顯示元素。當 display 屬性的值為 none 時，該元素會完全隱藏不顯示在頁面上；當 display 屬性的值為 block 時，該元素將被顯示出來。我們可以使用 JavaScript 通過操作該屬性來控制<div> 元素的隱藏和顯示。下面是一個基本的示例：

HTML 代碼：

<button onclick="toggleMenu()">點擊展開/收起菜單</button>
<div id="menu">
<p>這是菜單的內容</p>
<p>這是菜單的內容</p>
<p>這是菜單的內容</p>
</div>

JavaScript 代碼：

function toggleMenu() {
var menu = document.getElementById("menu");
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}

這個例子中，我們通過一個按鈕來觸發 toggleMenu() 函數，該函數會獲取菜單元素的引用，并切換它的 display 屬性的值。每次點擊按鈕時，菜單會在顯示和隱藏之間切換。

通過添加一些樣式和動畫效果，我們可以使<div>伸縮菜單更加有吸引力和互動性。下面是一個例子，使用了一些 CSS 過渡效果和動畫來實現平滑的菜單展開和收起：

HTML 代碼：

<style>
.menu {
display: none;
transition: height 0.5s ease;
overflow: hidden;
}
.expanded {
display: block;
height: 100px;
}
</style>
<br>
<button onclick="toggleMenu()">點擊展開/收起菜單</button>
<div id="menu" class="menu">
<p>這是菜單的內容</p>
<p>這是菜單的內容</p>
<p>這是菜單的內容</p>
</div>

JavaScript 代碼：

function toggleMenu() {
var menu = document.getElementById("menu");
menu.classList.toggle("expanded");
}

在這個例子中，我們給菜單元素添加了一個類名 "menu"，并設置了初始的 display 屬性為 none。通過添加一個動畫過渡效果，當菜單展開時，它的高度會從 0 漸變到 100px，在收起時則反之。

來說，<div> 伸縮菜單是一種實用的網頁設計元素，它可以幫助我們實現內容的隱藏和顯示。我們可以使用 JavaScript 來控制菜單的展開和收起，并通過添加樣式和動畫效果來增加交互性。