Trình đơn thu nhỏ cấp 3 của trình khởi động

Có ai có thể cung cấp cho tôi trình đơn thu gọn 3 cấp cơ bản cho thanh điều hướng khởi động không? Tôi không quản lý để mở cấp độ thứ ba. Ai đó có thể điều chỉnh mã của tôi để thêm cấp độ thứ ba không?Trình đơn thu nhỏ cấp 3 của trình khởi động

Đây là menu hai mức mà tôi có:

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

     <div class="nav-collapse"> 
     <ul class="nav"> 
      <a class="brand" href="#">Present Ideas</a> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Help</a></li> 
      <li class="dropdown" id="accountmenu"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Login</a></li> 
       <li><a href="#">Register</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Logout</a></li> 
      </ul> 
      </li> 
     </ul> 
     <ul class="nav pull-right"> 

     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </div> 
</div>

Tôi nghĩ cái gì đó như:

<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 

     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Help</a></li> 
      <li class="dropdown" id="accountmenu"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Login</a></li> 
       <li class="item-148 dropdown parent"> 
       <a href="/about/learn-more">Learn more&nbsp;<b class="caret-right"></b></a> 
       <ul class="dropdown-menu"> 
        <li class="item-149"><a href="/about/learn-more/the-software">The Software</a></li> 
        <li class="item-150"><a href="/about/learn-more/the-project">The Project</a></li> 
        <li class="item-151"><a href="/about/learn-more/the-leadership">The Leadership</a></li> 
        <li class="item-152"><a href="/about/learn-more/open-source-matters">Open Source Matters</a></li> 
       </ul> 
       </li> 
       <li class="divider"></li> 
       <li><a href="#">Logout</a></li> 
      </ul> 
      </li> 
     </ul> 
     <ul class="nav pull-right"> 

     </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
    </div> 
</div>

Nhưng điều đó không làm việc ..

Nguồn

2013-06-29 jens_vdp

Hãy xem ở đây cũng http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 –

Bootstrap 2.3.x và hỗ trợ sau số dropdown-submenu ..

<ul class="dropdown-menu"> 
      <li><a href="#">Login</a></li> 
      <li class="dropdown-submenu"> 
       <a tabindex="-1" href="#">More options</a> 
       <ul class="dropdown-menu"> 
        <li><a tabindex="-1" href="#">Second level</a></li> 
        <li><a href="#">Second level</a></li> 
        <li><a href="#">Second level</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Logout</a></li> 
</ul>

Working demo on Bootply.com

Nguồn

2013-06-30 12:02:38 ZimSystem

Điều đó đã làm các trick, nhờ ! –

+27

Và bootstrap 3 giảm hỗ trợ menu phụ ... – Michael

Có, hãy xem chủ đề này cho menu phụ Bootstrap v3: http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing – ZimSystem

Bootstrap 3 đã giảm hỗ trợ gốc cho các trình đơn thu gọn lồng nhau, nhưng có cách để bật lại nó bằng tập lệnh của bên thứ ba. Nó được gọi là SmartMenus. Nó có nghĩa là thêm ba tài nguyên mới vào trang của bạn, nhưng nó liên tục hỗ trợ Bootstrap 3.x với nhiều cấp độ của các trình đơn cho các thành phần lồng nhau <ul>/<li> với class="dropdown-menu". Nó cũng tự động hiển thị chỉ báo dấu mũ thích hợp.

<head> 
    ... 
    <script src=".../jquery.smartmenus.min.js"></script> 
    <script src=".../jquery.smartmenus.bootstrap.min.js"></script> 
    ... 
    <link rel="stylesheet" href=".../jquery.smartmenus.bootstrap.min.css"/> 
    ... 
</head>

Dưới đây là một trang demo: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html

Nguồn

2017-06-09 14:58:09 Tony

Trình đơn thu nhỏ cấp 3 của trình khởi động

Trả lời

Các vấn đề liên quan