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期），我有一些麻煩的Z-索引，如果您將鼠標懸停在側邊導航欄中的某個項目上，會出現從左到右的顏色過渡。我希望文字保持在最佳狀態。

問題2）我的下拉列表根本不起作用，我以爲我跟着bootstrap tutorial on it。

整個項目是一個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

爲了保持在頂部的文本，更改的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 2

第1期）我工作的一個HTML + CSS sidenav，我在Z-Index上遇到了一些麻煩，如果你將鼠標懸停在側邊導航欄中的某個項目上，會出現從左到右的顏色過渡。我希望文字保持在最佳狀態。

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

第2期）我的下拉列表將不會在所有的工作，我想我也跟着它引導教程。

整個項目是一個angular2項目。如果你可以使用ng-bootstrap的任何功能，太棒了！如果沒有，我很欣賞任何有關如何解決問題的反饋。

嘗試添加bootstrape.min.js

Answer 3

問題是你不能使用李：之前均顯示左側的彩色條，也爲色彩過渡，而且還有對文本最佳。

我所說的其實是添加你的列表項內部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：在3px顏色條之前，並且具有顏色轉換的跨度（具有較低的z-index）。