Bootstrap 3多级下拉菜单实例-偶像资源网

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>

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

Bootstrap 3多级下拉菜单实例

请登录后发表评论