div 樹形菜單是一種常見的網(wǎng)頁導(dǎo)航菜單樣式，通過使用HTML和CSS來實現(xiàn)可折疊、展開的層級菜單結(jié)構(gòu)。該菜單樣式以一棵樹的形式展示，每一級菜單都可以通過點擊父級菜單實現(xiàn)展開和折疊，從而實現(xiàn)多層次的導(dǎo)航功能。

下面我們通過幾個代碼案例來詳細介紹如何使用div 樹形菜單。

案例一：基礎(chǔ)的 div 樹形菜單

，我們需要一個 HTML 結(jié)構(gòu)，它包含了一個具有層級關(guān)系的菜單列表。如下所示：

<div class="tree-menu">
<ul class="menu-root">
<li>菜單項1
<ul class="menu-level1">
<li>子菜單項1</li>
<li>子菜單項2</li>
<li>子菜單項3</li>
</ul>
</li>
<li>菜單項2</li>
<li>菜單項3</li>
</ul>
</div>

以上代碼展示了一個基礎(chǔ)的 div 樹形菜單，其中使用了<ul>和<li>標簽來構(gòu)建菜單列表的層級關(guān)系，每一級菜單都嵌套在上一級菜單的<li>內(nèi)部。在這個例子中，菜單項1下面有三個子菜單項，菜單項2和菜單項3沒有子菜單。

下面是相應(yīng)的 CSS 樣式代碼：

.tree-menu .menu-level1 {
display: none;
}
<br>
.tree-menu .menu-root li {
cursor: pointer;
}
<br>
.tree-menu .menu-root li:hover {
background-color: #f5f5f5;
}
<br>
.tree-menu .menu-root li.active {
font-weight: bold;
}
<br>
.tree-menu .menu-root li.active .menu-level1 {
display: block;
}

.tree-menu .menu-level1 {
display: none;
transition: max-height 0.3s ease-in-out;
max-height: 0;
overflow: hidden;
}
<br>
.tree-menu .menu-root li.active .menu-level1 {
display: block;
transition: max-height 0.3s ease-in-out;
max-height: 500px;
}