Bootstrap3多级下拉菜单

本文实例为大家分享了Bootstrap下拉菜单的具体代码，供大家参考，具体内容如下

效果图：

- 需要引用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>

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

赞 (0)

相关推荐

  • Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码

    使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

  • BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路: 1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加载页放置一个时间控件,测试通过 3,在模态框最外层放置一个时间控件,不通过 主要原因是模态框与时间下拉菜单层级关系造成(z-index),因时间控件是收bootstrap的时间控件.js文件生成,所以导致在页面与css样式表中修改无效,网上有直接修改bootstrap的时间控件.js文件,然而bo

  • Bootstrap每天必学之级联下拉菜单

    Bootstrap每天必学之级联下拉菜单

    本文将介绍自定义的bootstrap级联下拉菜单,主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费很多精力的和时间的,所谓通用,自然要考虑周全,叹!这次整理的Bootstrap关联select,里面也涉及到了很多jquery.ajax.springMVC等等知识点,可谓包罗万象! 首先,请允许我代表该自定义组件做一番小小的介绍. "hi,你好,我叫yunm.combox.js,主人给我起的名字,其实呢,挺俗的.我

  • Bootstrap+jfinal实现省市级联下拉菜单

    Bootstrap+jfinal实现省市级联下拉菜单

    小小一个省市级关联菜单,却耗费了一个很多时间来摸索,原因在于对jquery不熟练,既然这么辛苦完成了一个组件,自然想要共享出来,让需要的人使用. 这只是一个基础版,后续还要再进行优化. 代码:省市级关联菜单下载地址 说明: sql语句就不再说了,里面有"city.sql"."provincial.sql"两个文件. 1.先说说获取数据 public void initProcitys() { logger.info("获取所在地区"); List

  • 学习Bootstrap组件之下拉菜单

    学习Bootstrap组件之下拉菜单

    Bootstrap 是由Twitter 工程师推出的基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架,我们可以把它想象成一个定义了很多效果的CSS与JS的库,库里面已经定义好了各种组件的显示效果与动画. .dropdown--设置父元素为下拉菜单组件,向下弹出子菜单: .dropup--设置父元素为下拉菜单组件,向上弹出子菜单: .dropdown-toggle--设置按钮为下拉菜单切换按钮: .dropdown-menu--设置ul元素为下拉菜单: .dropdown-men

  • JS组件Bootstrap实现下拉菜单效果代码

    JS组件Bootstrap实现下拉菜单效果代码

    Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容:

  • Bootstrap每天必学之下拉菜单

    Bootstrap每天必学之下拉菜单

    一.下拉菜单(基本用法) 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,它对应的文件: ☑ LESS版本:对应的源码文件为 dropdowns.less ☑ Sass版本:对应的源码文件为 _dropdowns.sass ☑ 编译后的Bootstrap版本:查看bootstrap.css文件第3004行-第3130行 在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本

  • Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发

    在使用bootstrap制作后台时用到了响应式导航条,其中dropdown组件更是用的比较多,用的多需要点击的就多,dropdown默认鼠标左键单击才展开,如果使用鼠标放上去(hover)就展开则会省去点击时间,这样能提高效率. 原本的改造思路是:给dropdown元素绑定hover事件,hover上去的时候,执行该元素的click事件--即把hover同步为click,hover即为click. 但想到与其自己来改造,不如先在网上搜索搜索看看有没有现成的插件,果不其然就搜索到了,托管在gith

  • Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创

    最近公司做网页用到Bootstrap的菜单功能,要实现鼠标悬停显示二级菜单,于是就研究了一下,大概有两种方法. 第一种方法:修改样式表 实际上比较简单,只需要加一个css设置下hover的状态,把下拉菜单设置成block,具体css: 复制代码 代码如下: .nav > li:hover .dropdown-menu {display: block;} 这句css加在bootstrap.min.css之后出现的css中,你试下! 缺点: 1.相应的顶级菜单不可点击 2.鼠标滑到二级菜单后,顶级菜

  • Bootstrap实现下拉菜单效果

    Bootstrap实现下拉菜单效果

    下拉菜单用于显示链接列表的可切换.有上下文的菜单. 1.案例 将下拉菜单触发器和下拉菜单都包裹在.dropdown里,然后添加组成菜单的HTML代码. <div class="dropdown"> <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> D

随机推荐