Bootstrop实现多级下拉菜单功能


Posted in Javascript onNovember 24, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

下面给大家分享bootstrap多级下拉菜单功能的实例代码。

先给大家看下效果图:

Bootstrop实现多级下拉菜单功能

- 需要引用bootstrap.min.css和bootstrap.min.css.js

- 代码如下

<head>
<meta charset="UTF-8">
<title>Bootstrap 3 的多级下拉菜单示例</title>
<link rel="stylesheet" href="~/Content/bootstrap.min.css" />
<script type="text/javascript" src="~/Content/bootstrap.min.css.js"></script>
<style type="text/css">
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<h2>Bootstrap 3多级下拉菜单</h2>
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-default" data-target="#" href="javascript:;">
下拉多级菜单 <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="javascript:;">总经理</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="javascript:;">经理1</a></li>
<li><a tabindex="-1" href="javascript:;">经理2</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="javascript:;">研发部</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="javascript:;">主管</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="javascript:;">员工</a>
<ul class="dropdown-menu">
<li><a href="javascript:;">互    评</a></li>
<li><a href="javascript:;">不互评</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>

以上所述是小编给大家介绍的Bootstrop实现多级下拉菜单功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 #Javascript
微信小程序-详解数据缓存
Nov 24 #Javascript
如何实现json数据可视化详解
Nov 24 #Javascript
BootStrap 可编辑表Table格
Nov 24 #Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 #Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 #Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 #Javascript
You might like
php 字符串替换的方法
2012/01/10 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
Django Rest framework权限的详细用法
2019/07/25 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python同步windows和linux文件
2019/08/29 Python
法学院毕业生求职信
2014/06/25 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
护士实习自荐信
2015/03/06 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
详解Python为什么不用设计模式
2021/06/24 Python