<div 隱藏菜單是一種常見的網頁設計技巧，通過設置CSS屬性來實現菜單的顯隱效果。在網頁設計中，隱藏菜單可用于提供更簡潔的用戶界面，節省頁面空間，并提高用戶體驗。本文將詳細介紹使用div隱藏菜單的幾個代碼案例，以幫助讀者更好地理解和運用這一技巧。
案例一：點擊按鈕展開隱藏菜單 假設我們有一個按鈕，當用戶點擊該按鈕時，菜單會從頂部向下展開。以下是實現這一效果的代碼：

html
<div class="menu">
<button id="toggle-btn" onclick="toggleMenu()">展開菜單</button>
<ul id="menu-list">
<li>菜單項1</li>
<li>菜單項2</li>
<li>菜單項3</li>
</ul>
</div>
<br>
css
.menu {
position: relative;
}
#menu-list {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.show-menu #menu-list {
display: block;
}

在上述代碼中，我們定義了一個包含按鈕和菜單的div容器，并設置了按鈕的點擊事件為toggleMenu()。通過CSS設置#menu-list的display屬性為none，表示菜單默認隱藏。當按鈕被點擊時，toggleMenu()函數會在div容器上添加class名為show-menu，從而觸發CSS選擇器.show-menu #menu-list的規則，使菜單顯示出來。
案例二：鼠標懸停顯示隱藏菜單 除了通過點擊按鈕來展開隱藏菜單，我們還可以通過鼠標懸停來實現相同的效果。以下是實現這一效果的代碼：

html
<div class="menu">
<ul id="menu-list">
<li>菜單項1</li>
<li>菜單項2</li>
<li>菜單項3</li>
</ul>
</div>
<br>
css
.menu {
position: relative;
}
#menu-list {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.menu:hover #menu-list {
display: block;
}

在上述代碼中，我們移除了按鈕，并將菜單直接放置在div容器中。通過CSS選擇器.menu:hover #menu-list，我們定義了當鼠標懸停在div容器上時，菜單顯示出來的規則。
以上是兩個常見的div隱藏菜單的案例，通過設置CSS屬性和使用JavaScript函數，我們可以實現不同的菜單顯隱效果。隱藏菜單技巧能夠為網頁設計帶來更簡潔和美觀的界面，同時提高用戶的操作體驗。希望讀者通過本文的介紹和代碼案例，能夠對div隱藏菜單有更深入的理解，并在自己的網頁設計中靈活應用。