具有Z-Index和下拉列表的CSS垂直導航問題

Question

 @import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"; @import "https://daneden.github.io/animate.css/animate.min.css"; @media (min-width: 768px) { .bootstrap-vertical-nav .collapse { display: block; } } /*-------------------------------*/ /* Sidebar nav styles */ /*-------------------------------*/ .sidebar-nav { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; width: 220px; } .sidebar-nav li { display: inline-block; line-height: 20px; position: relative; width: 100%; } /* this background color doesn't trigger */ .sidebar-nav li:before { content: ''; height: 100%; left: 0; position: absolute; top: 0; transition: width 0.2s ease-in; width: 3px; z-index: 0; } .sidebar-nav li:first-child a { background-color: #1a1a1a; color: 555; } .sidebar-nav li:nth-child(2):before { background-color: #d12525; } .sidebar-nav li:nth-child(3):before { background-color: #4c366d; } .sidebar-nav li:nth-child(4):before { background-color: #583e7e; } .sidebar-nav li:nth-child(5):before { background-color: #64468f; } .sidebar-nav li:nth-child(6):before { background-color: #704fa0; } .sidebar-nav li:nth-child(7):before { background-color: #7c5aae; } .sidebar-nav li:nth-child(8):before { background-color: #8a6cb6; } .sidebar-nav li:nth-child(9):before { background-color: #987dbf; } .sidebar-nav li:hover:before { transition: width 0.2s ease-in; width: 100%; } .sidebar-nav li a { background-color: #1a1a1a; color: #fff; display: block; padding: 10px 15px 10px 30px; text-decoration: none; z-index: -2; } .sidebar-nav li.open:hover before { transition: width 0.2s ease-in; width: 100%; } .sidebar-nav .dropdown-menu { background-color: #222222; border-radius: 0; border: none; box-shadow: none; margin: 0; padding: 0; position: relative; width: 100%; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { background-color: transparent; color: #fff; text-decoration: none; } .sidebar-nav > .sidebar-brand { font-size: 20px; height: 65px; line-height: 44px; } 

  <div class="collapse" id="collapseExample"> <ul class="nav flex-column sidebar-nav" id="exCollapsingNavbar3"> <li class="nav-item sidebar-brand"> <a nav-link href="#"> Bootstrap 4 </a> </li> <li class="nav-item"> <a class="nav-link active" href="#"><i class="fa fa-fw fa-home"></i>&nbsp;Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-folder"></i>&nbsp;Page one</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-file-o"></i>&nbsp;Second page</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-cog"></i>&nbsp;Third page</a> </li> <li class="nav-item dropdown"> <a class="nav-item" href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i>&nbsp;Dropdown&nbsp;<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">Dropdown heading</li> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-bank"></i>&nbsp;Page four</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-bank"></i>&nbsp;Page 5</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fa fa-fw fa-twitter"></i>&nbsp;Last page</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> 

問題1）我正在處理HTML + CSS sidenav，我在使用Z-Index時遇到了一些麻煩，如果將鼠標懸停在side nav中的某個項目上，則會出現從左到右的顏色過渡。 我希望文字停留在最前面。

問題2）我的下拉列表根本無法使用，我以為我遵循了它的引導教程 。

整個項目是一個angular2項目。 如果您可以將ng-bootstrap用於任何功能，那就太好了！ 如果沒有，我感謝您對如何解決這兩個問題的任何反饋。

更新：解決方案，您需要ng-bootstrap才能正常工作。 不確定如何將庫添加到代碼段工具中。

 @import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"; @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"; @import "https://daneden.github.io/animate.css/animate.min.css"; @media (min-width: 768px) { .bootstrap-vertical-nav .collapse { display: block; } } /*-------------------------------*/ /* Sidebar nav styles */ /*-------------------------------*/ .sidebar-nav { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; width: 220px; } .sidebar-nav li { display: inline-block; line-height: 20px; position: relative; width: 100%; } .sidebar-nav div { display: inline-block; line-height: 20px; position: relative; width: 100%; } /* this background color doesn't trigger */ .sidebar-nav li:before { content: ''; height: 100%; left: 0; position: absolute; top: 0; transition: width 0.2s ease-in; width: 3px; z-index: -2; } .sidebar-nav div:before { content: ''; height: 100%; left: 0; position: absolute; top: 0; transition: width 0.2s ease-in; width: 3px; z-index: -2; } .sidebar-nav li:first-child a { background-color: #1a1a1a; color: 555; } .sidebar-nav li:nth-child(n):before { z-index: 1; background-color: #b7e7ff; } .sidebar-nav li:nth-child(1):before { background-color: transparent; } /* BLUE: 0085c6 and darker is: 0c78ad YELLOW: f3c300 BLACK: 000 GREEN: 009f3d RED: e00024 */ .sidebar-nav li:nth-child(n) div:before { background-color: #0085c6; z-index: 1; } .sidebar-nav li:hover:before { transition: width 0.2s ease-in; width: 100%; z-index: -1; } .sidebar-nav li a { background-color: #1a1a1a; color: #fff; display: block; padding: 10px 15px 10px 30px; text-decoration: none; } .sidebar-nav li.open:hover before { transition: width 0.2s ease-in; width: 100%; } .sidebar-nav .dropdown-menu { background-color: #1a1a1a; border-radius: 0; border: none; box-shadow: none; margin: 0; padding: 0 0 0 15%; position: relative; width: 100%; } .sidebar-nav .dropdown-menu li:nth-child(1):before { background-color: #b7e7ff; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { background-color: transparent; color: #fff; text-decoration: none; } .sidebar-nav>.sidebar-brand { font-size: 20px; height: 65px; line-height: 44px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 col-lg-3"> <!--<div id="collapseExample" [ngbCollapse]="isCollapsed"> <div class="card"> <div class="card-block"> You can collapse this card by clicking Toggle </div> </div> </div>--> <div id="collapseExample" [ngbCollapse]="isCollapsed" class="bootstrap-vertical-nav"> <div class="collapse" id="collapseExample"> <ul class="nav flex-column sidebar-nav" id="exCollapsingNavbar3"> <li class="nav-item sidebar-brand"> <a nav-link href="#"> Bootstrap 4 </a> </li> <li class="nav-item"> <div> <a class="nav-link active" href="#"><i class="fa fa-fw fa-home"></i>&nbsp;Home</a> </div> </li> <li class="nav-item"> <div> <a class="nav-link" href="#"><i class="fa fa-fw fa-folder"></i>&nbsp;Page one</a> </div> </li> <li class="nav-item"> <div> <a class="nav-link" href="#"><i class="fa fa-fw fa-file-o"></i>&nbsp;Second page</a> </div> </li> <li class="nav-item"> <div> <a class="nav-link" href="#"><i class="fa fa-fw fa-cog"></i>&nbsp;Third page</a> </div> </li> <li class="nav-item dropdown"> <div ngbDropdown> <a class="nav-item" href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-fw fa-plus"></i>&nbsp;Dropdown&nbsp;<span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> </ul> </div> </li> <li class="nav-item"> <div> <a class="nav-link disabled" href="#">Disabled</a> </div> </li> </ul> </div> </div> </div> <div class="col-md-8 col-lg-9"> <p> <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample"> Toggle </button> </p> <hr /> <div> <h1>Right Pane - Bootstrap 4.0 Vertical Nav Example</h1> </div> </div> </div> </div> 

Answer 1

問題是您不能使用li：before來同時顯示左側的彩色條和顏色過渡，並且仍然在頂部顯示文本。

我建議在列表項中添加一個span元素，並且該span應該代表應該始終顯示的彩色條：

<li class="nav-item">
   <span class="before-bar"></span>
   <a class="nav-link active" href="#"><i class="fa fa-fw fa-home"></i>&nbsp;Home</a>
</li>

.before-bar {
    position: absolute;
    height: 100%;
    width: 3px;
}

.sidebar-nav li:nth-child(2):before, 
.sidebar-nav li:nth-child(2) .before-bar {
    background-color: #d12525;
}

請參閱http://plnkr.co/edit/AHaTOQmBwllZV5bATFtJ?p=preview （僅針對“首頁”鏈接進行了修改）

也許更好的解決方案是將li：before設置為3px色條，並保留顏色過渡的范圍（z索引較低）。

Answer 2

要使文本位於頂部，請更改li：before的z-index

.sidebar-nav li:before {
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: width 0.2s ease-in;
  width: 3px;
  z-index: -1;
}

Answer 3

問題1）我正在處理HTML + CSS sidenav，我在使用Z-Index時遇到了一些麻煩，如果將鼠標懸停在side nav中的某個項目上，則會出現從左到右的顏色過渡。 我希望文字停留在最前面。

.sidebar-nav li a{
position:relative;
z-index:0;
}

問題2）我的下拉列表根本無法使用，我以為我遵循了引導教程。

整個項目是一個angular2項目。 如果您可以將ng-bootstrap用於任何功能，那就太好了！ 如果沒有，我感謝您對如何解決這兩個問題的任何反饋。

嘗試添加bootstrape.min.js