bootstrap+jquery 左侧菜单实现
<div id="mainMenuOpen" class="menuSwitch" onclick="switchMenuBar();" title="展开菜单"><span>>></span></div> <div id="mainMenu" class="menuMain"> <ul id="main-nav" class="nav nav-tabs nav-stacked" > <li class="head"> <a href="javascript:void(0);" class="left" title="返回首页" id="btnIndex">首页</a> <a href="javascript:void(0);" class="right" title="收起菜单" onclick="switchMenuBar()"><<</a> </li> <li> <a href="#menuL1_1" class="nav-header collapsed" data-toggle="collapse">第一层菜单1</a> <ul id="menuL1_1" class="nav nav-list collapse menuL2"> <li><a href="javascript:void(11);" class="nav-page">第二层页面11</a></li> <li><a href="javascript:void(12);" class="nav-page">第二层页面12</a></li> <li><a href="javascript:void(13);" class="nav-page">第二层页面13</a></li> <li> <a href="#menuL2_1_1" class="nav-sub" data-toggle="collapse">第二层菜单1</a> <ul id="menuL2_1_1" class="nav nav-list collapse menuL3"> <li><a href="javascript:void(2111);" class="nav-page">第三层页面11</a></li> <li><a href="javascript:void(2112);" class="nav-page">第三层页面12</a></li> </ul> </li> <li> <a href="#menuL2_1_2" class="nav-sub" data-toggle="collapse">第二层菜单1</a> <ul id="menuL2_1_2" class="nav nav-list collapse menuL3"> <li><a href="javascript:void(2121);" class="nav-page" target="mainFrame" >第三层页面21</a></li> <li><a href="javascript:void(2122);" class="nav-page" target="mainFrame" >第三层页面21</a></li> </ul> </li> </ul> </li> <li> <a href="#menuL1_2" class="nav-header collapsed" data-toggle="collapse">第一层菜单2</a> <ul id="menuL1_2" class="nav nav-list collapse menuL2"> <li><a href="javascript:void(21);" class="nav-page">第二层页面1</a></li> <li><a href="javascript:void(22);" class="nav-page">第二层页面2</a></li> <li> <a href="#menuL2_2_1" class="nav-sub" data-toggle="collapse">二级主菜单3</a> <ul id="menuL2_2_1" class="nav nav-list collapse menuL3"> <li><a href="javascript:void(2211);" class="nav-page">第三层页面1</a></li> <li><a href="javascript:void(2212);" class="nav-page">第三层页面2</a></li> </ul> </li> <li> <a href="#menuL2_2_2" class="nav-sub" data-toggle="collapse">二级主菜单4</a> <ul id="menuL2_2_2" class="nav nav-list collapse menuL3"> <li><a href="javascript:void(2221);" class="nav-page" target="mainFrame" >第三层页面1</a></li> <li><a href="javascript:void(2222);" class="nav-page" target="mainFrame" >第三层页面2</a></li> </ul> </li> </ul> </li> <li> <a href="#menuL1_3" class="nav-header collapsed" data-toggle="collapse">第一层菜单3</a> <ul id="menuL1_3" class="nav nav-list collapse menuL2"> <li><a href="javascript:void(31);" class="nav-page">第二层页面1</a></li> <li><a href="javascript:void(32);" class="nav-page">第二层页面2</a></li> </ul> </li> </ul> </div>