`

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>

 

 

 

  • 大小: 11.8 KB
分享到:
评论

相关推荐

    Bootstrap4导航菜单sina-nav

    总的来说,sina-nav插件是Bootstrap4开发者的一个强大工具,它简化了复杂导航菜单的实现,提高了开发效率,同时也提供了多种风格和功能的选择,以满足不同类型的网站和应用需求。通过熟练掌握这个插件,开发者可以...

    C#实现左侧菜单效果

    在本文中,我们将深入探讨如何使用C#编程语言来实现一个炫酷且实用的左侧菜单效果,这将有助于提升用户界面的交互性和美观性。在实际的软件开发中,左侧菜单通常作为应用的主要导航工具,帮助用户快速访问不同的功能...

    仿QQ5.0左侧菜单

    此外,还可以借助Bootstrap、Ant Design等UI库,它们提供了现成的侧边栏组件,可以快速搭建出类似QQ5.0的左侧菜单。 对于移动应用开发,原生平台如Android和iOS也有自己的解决方案。在Android中,可以使用`...

    Bootstrap 3.3.4后台主题左右布局ui框架最新版h+4.0

    基于最新版本的Bootstrap 3.3.4 3 .提供4套不同风格的皮肤 4 .使用最流行的的扁平化设计 5 .提供了诸多的UI组件 6 .集成多款国内优秀插件,诚意奉献 7 .提供盒型、全宽、响应式视图模式 8 .采用...

    bootstrap4模板文件

    Bootstrap 4 提供了一套完整的CSS和JavaScript组件,如卡片、模态、下拉菜单、轮播图等,使得开发人员能够轻松构建交互式的动态元素。模板的简洁大方设计,不仅提升了用户体验,也减轻了设计师的工作负担。在实际...

    metronic.bootstrap

    在组件方面,Metronic Bootstrap 提供了各种常见的后台元素,如表格、表单、按钮、图标、下拉菜单、模态框、进度条、轮播图、提示框、面板、导航等。这些组件都经过精心设计和优化,具有良好的交互性和一致的视觉...

    Axure RP8 bootstrap4 样式库,亲测有效!!

    这个.rplib文件包含了一系列预定义的组件和样式,使得在Axure RP8中创建原型时,可以快速应用Bootstrap 4的设计风格。 Axure RP8是一款广泛使用的原型设计工具,允许设计师创建交互式的 wireframes 和原型。通过...

    css经典横向菜单,多种样式

    - **菜单样式**:可以设置背景色、边框、圆角、阴影等属性,以创建不同风格的菜单。 ```css .horizontal-menu li a { display: block; /* 使链接充满整个li元素 */ padding: 10px 20px; text-decoration: none...

    Axure RP8 bootstrap3 样式库

    5. 文件加载完成后,新的Bootstrap3部件库就会出现在“部件”面板中,你可以直接拖放这些预定义的组件到画布上,开始构建基于Bootstrap3风格的原型。 这个样式库包含了各种Bootstrap3的典型元素,如导航栏、按钮、...

    jQuery左侧垂直四级导航菜单特效.zip

    通过媒体查询或Bootstrap框架等工具,可以让这个四级导航菜单在桌面、平板和手机等不同设备上呈现合适的布局。 总结来说,"jQuery左侧垂直四级导航菜单特效"是利用现代Web技术实现的一种交互式菜单解决方案。它结合...

    简约bootstrap后台管理系统界面模板-SplashDash

    例如,SplashDash可能会提供一个顶部固定导航,包含品牌标识、菜单选项和用户操作,以及一个可折叠的左侧菜单,方便用户在后台系统中快速导航。 此外,Bootstrap的表单控件和验证功能在后台管理系统中尤为重要。...

    多用途的时尚购物商城bootstrap模板.zip

    Bootstrap是世界上最受欢迎的前端开发框架之一,用于快速构建响应式和移动优先的网站。这款"多用途的时尚购物商城bootstrap模板"充分利用了Bootstrap的强大功能,为电商网站提供了一套美观且功能丰富的界面设计。 ...

    MetroNic 2.0.2 bootstrap 3.1.1

    在许多网页应用中,尤其是那些具有侧边栏导航菜单的设计中,左侧栏的固定和可折叠功能是非常常见的。图标在用户交互过程中起到重要的引导作用,因此确保它们在任何情况下都能正确显示是至关重要的。 在MetroNic ...

    MetroNic_2.0.2-bootstrap3.1.1

    MetroNic 集成了Bootstrap 3.1.1,这是Bootstrap的一个稳定版本,提供了丰富的组件和预设样式,包括网格系统、导航、表单、按钮、下拉菜单等,极大地简化了开发者的工作流程。Bootstrap的响应式设计使得网站能在桌面...

    bootstrap后台模板.7z

    1. **多主题和布局**:Metronic提供了多种颜色主题和布局配置,包括固定和流式头部、全宽和盒型布局、左侧和顶部菜单等,允许开发者轻松定制界面风格。 2. **强大的栅格系统**:Metronic在Bootstrap的基础上扩展了...

    京东商城左侧弹出式菜单设计制作

    1. **菜单结构**:京东商城的左侧菜单通常包含一级分类和二级分类,甚至三级分类。一级分类是大类,如“手机数码”、“家用电器”等,二级分类是更具体的子类别,如“手机”、“笔记本电脑”等。这种分层结构使得...

    仿win8扁平化设计bootstrap后台模板-蓝色 metro风格 管理员 admin 后台管理系统 全屏 左栏 侧栏

    模板中的“全屏”和“左栏/侧栏”布局是指后台界面可以切换成全屏模式,最大化显示工作区域,或者采用左侧边栏展示导航菜单,这样的布局有利于组织和分类复杂的后台功能,提高工作效率。 压缩包内的`readme.md`文件...

    CoreAdmin后台管理模板bootstrap风格的后台管理html模板

    模板一般会提供固定和折叠的顶部导航、左侧侧边栏菜单,以及面包屑导航等元素,方便用户在后台系统中快速定位和导航。侧边栏通常有可展开/收起的功能,以节省屏幕空间。 4. **图标和字体库**: CoreAdmin会集成...

Global site tag (gtag.js) - Google Analytics