编程 Javascript

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>

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

Bootstrap 3多级下拉菜单实例

- Author -

小流_跬步

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于逻辑运算的简单权限系统(实现) JS 版

Mar 24 Javascript

JavaScript 异步调用框架 (Part 2 - 用例设计)

Aug 03 Javascript

jquery实用代码片段集合

Aug 12 Javascript

JS判断两个时间大小的示例代码

Jan 28 Javascript

让alert不出现弹窗的两种方法

May 18 Javascript

推荐JavaScript实现继承的最佳方式

Nov 11 Javascript

JS实现iframe自适应高度的方法(兼容IE与FireFox)

Jun 24 Javascript

js 点击a标签获取a的自定义属性方法

Nov 21 Javascript

基于jQuery代码实现圆形菜单展开收缩效果

Feb 13 Javascript

基于JavaScript实现飘落星星特效

Aug 10 Javascript

javascript 中事件冒泡和事件捕获机制的详解

Sep 01 Javascript

vue通过指令(directives)实现点击空白处收起下拉框

Dec 06 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