Bootstrap 3多级下拉菜单实例


Posted in Javascript onNovember 23, 2017

Bootstrap 虽好,但对于复杂的界面,还是有N多组件需要自己扩展,并且要往简洁、大气的Bootstrap界面上靠,着实要费一些功夫。下面分享一个Bootstrap 3的多级下拉菜单,无需第三方Js脚本,复制后直接可用。

<!DOCTYPE HTML> 
<html lang="zh-CN"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Bootstrap 3 的多级下拉菜单示例</title> 
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
  <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/> 
  <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.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-primary" data-target="#" 
        href="javascript:;"> 
        下拉多级菜单 <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
        <li><a href="javascript:;">一级菜单</a></li> 
        <li><a href="javascript:;">一级菜单</a></li> 
        <li class="divider"></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> 
              </ul> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </div> 
  </div> 
</div> 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
轮播的简单实现方法
Jul 28 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 #Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 #Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 #Javascript
bootstrap select下拉搜索插件使用方法详解
Nov 23 #Javascript
基于Bootstrap实现城市三级联动
Nov 23 #Javascript
bootstrap-Treeview实现级联勾选
Nov 23 #Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 #Javascript
You might like
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
跟我学Laravel之路由
2014/10/15 PHP
php学习笔记之基础知识
2014/11/08 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
prototype1.4中文手册
2006/09/22 Javascript
jscript之Open an Excel Spreadsheet
2007/06/13 Javascript
Angularjs 基础入门
2014/12/26 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
浅谈Vue.js
2017/03/02 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
Python实现身份证号码解析
2015/09/01 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
python实现飞机大战
2018/09/11 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
Pycharm Git 设置方法
2020/09/15 Python
python复合条件下的字典排序
2020/12/18 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
电子商务专业个人的自我评价分享
2013/10/29 职场文书
助学感谢信范文
2015/01/21 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS