HTML的左側(cè)二級(jí)菜單欄是網(wǎng)站中經(jīng)常用到的組件之一，它可以讓網(wǎng)站的導(dǎo)航更加清晰和便捷。下面我們來(lái)看一下它的代碼實(shí)現(xiàn)。

<ul class="sidebar-menu">
<li class="treeview active">
<a href="#">
<i class="fa fa-dashboard"></i> <span>控制面板</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> 概述</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> 統(tǒng)計(jì)報(bào)表</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i> <span>示例頁(yè)面</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="#"><i class="fa fa-circle-o"></i> 登錄頁(yè)面</a></li>
<li><a href="#"><i class="fa fa-circle-o"></i> 注冊(cè)頁(yè)面</a></li>
</ul>
</li>
</ul>

以上代碼展示了一個(gè)具有兩個(gè)一級(jí)菜單、每個(gè)一級(jí)菜單內(nèi)有兩個(gè)二級(jí)子菜單的導(dǎo)航欄。其中，ul與li標(biāo)簽來(lái)定義列表和列表項(xiàng)，class屬性用于個(gè)性化樣式的定義，a標(biāo)簽包含了菜單項(xiàng)的鏈接和文字說(shuō)明，i標(biāo)簽用于在菜單項(xiàng)前面展示圖標(biāo)。

在二級(jí)菜單的實(shí)現(xiàn)中，在每個(gè)一級(jí)菜單里面使用了一個(gè)ul標(biāo)簽，每個(gè)ul下面又有若干li子項(xiàng)，每個(gè)li子項(xiàng)也是一個(gè)a標(biāo)簽。這樣，我們就能夠在二級(jí)菜單之間進(jìn)行切換，實(shí)現(xiàn)二級(jí)菜單的多級(jí)聯(lián)動(dòng)效果。