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 相关文章推荐
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
Element Carousel 走马灯的具体实现
Jul 26 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
PHP4实际应用经验篇(5)
2006/10/09 PHP
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
php 操作调试的方法
2012/07/12 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
ES6的新特性概览
2016/03/10 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
如何让python的运行速度得到提升
2020/07/08 Python
Linux面试题LINUX系统类
2014/11/19 面试题
实习生自荐信范文分享
2013/11/27 职场文书
期末自我鉴定
2014/01/23 职场文书
法律六进活动方案
2014/03/13 职场文书
电台编导求职信
2014/05/06 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
旅游节目策划方案
2014/05/26 职场文书
推广普通话标语
2014/06/27 职场文书
初婚初育证明范本
2014/11/24 职场文书
实习生个人总结范文
2015/02/28 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
医院病假条怎么写
2015/08/17 职场文书
2016年党建工作简报
2015/11/26 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python