Bootstrap 3多級下拉菜單實例

發(fā)布時間：2020-08-23 19:28:46 來源：腳本之家閱讀：127 作者：小流_跬步欄目：web開發(fā)

Bootstrap 雖好，但對于復(fù)雜的界面，還是有N多組件需要自己擴展，并且要往簡潔、大氣的Bootstrap界面上靠，著實要費一些功夫。下面分享一個Bootstrap 3的多級下拉菜單，無需第三方Js腳本，復(fù)制后直接可用。

<!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" /> 
  <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"> 
    <h3>Bootstrap 3多級下拉菜單</h3> 
    <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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

Bootstrap 3多級下拉菜單實例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽