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>
相关推荐
bootstrap前台悬浮左侧菜单简单html代码
Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航
bootstrap风格的zTree树形菜单代码 一款支持自定义编辑,添加列表,删除列表等功能的bootstrap风格的zTree树形菜单代码,jQuery树形结构菜单插件下载。
右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap样式、右键菜单案例、BootStrap...
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。
这是一款基于Bootstrap和Bootsnav的多级导航菜单。该多级导航菜单通过简单的CSS代码来对菜单进行美化,制作鼠标滑过的动画效果。
Bootstrap树形菜单JS代码特效
metro bootstrap 风格 模板
内核是EasyUI,界面风格为Bootstrap,功能和美观完美结合!方便前后端的开发!本例提供两种风格。用.NET MVC 做了一个demo。欢迎下载体验!
jquery bootstrap侧边隐藏响应式下拉导航菜单栏
bootstrap风格zTree组件,使用bootstrap的同学,在使用zTree插件时,发现风格很难看,和bootstrap不搭调,现在你们的福利来了,bootstrap风格的zTree插件发布了!
本demo所需技术:jQuery+Bootstrap 本demo所用工具:IDEA 本demo主要实现功能: 1. 左侧菜单栏切换右侧页面内容 2. boostrap弹框内容的显示
bootstrap无限极菜单,包括鼠标移上显示购物车等功能,页面响应式布局完全可以拿来创建一个英文风格网站。有需要的拿走!!
sina-nav是一款Bootstrap4导航菜单插件。通过该插件可快速创建基于bootstrap4的下拉菜单、大型菜单,属性菜单和侧边栏菜单等。
BootStrap风格的zTree,非常的漂亮。让你的界面拥有自然的优雅
bootstrap风格的后台界面模板 界面漂亮大气 拿来直接可以使用
主要介绍了Bootstrap打造一个左侧折叠菜单的系统模板(一)的相关资料,需要的朋友可以参考下