在本教程中，您将使用JavaScript和CSS创建可扩展的侧面导航菜单。最终产品如下图所示：
1.创建标记首先，让我们为侧边菜单添加一些标记：
<divid="sideNavigation"class="sidenav"><ahref="#"class="close-btn">×</a><ahref="#">About</a><ahref="#">Features</a><ahref="#">ContactUs</a></div><navclass="topnav"><ahref="#"class="ham-icon"><svgwidth="30"height="30"id="icoOpen"><pathd="M0,530,5"stroke="#000"stroke-width="5"/><pathd="M0,1430,14"stroke="#000"stroke-width="5"/><pathd="M0,2330,23"stroke="#000"stroke-width="5"/></svg></a></nav><sectionid="main"><h1>ThisSideNavigationMenuLooksGood!</h1><p>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</p></section>
2025-07-23
admin00120