bootstrap 风格左侧菜单

 

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>