在下拉式轉換中包含CSS三角形

Question

我有一個帶切換按鈕的常規Bootstrap導航欄，用於在點擊時顯示導航欄摺疊。我在菜單上添加了一個三角形，以便它指向漢堡按鈕。我想讓下拉菜單按鈕顯示一個轉換，但是直到三角形出現，還有第二個延遲。在菜單的同一時間，如何讓三角形顯示在轉換中？

Bootply

<nav class="navbar navbar-default navbar-static-top"> 
     <div class="navbar-header"> 

     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 

<div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">All Watches</a></li> 
     <li class="dropdown"> 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"> 
     Watches by Brand <span class="caret"></span> 
    </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Audemars Piguet</a></li> 
      <li><a href="#">Bell &amp; Ross</a></li> 
      <li><a href="#">Blancpain</a></li> 
     </ul> 
    </li> 
     <li><a href="#"></a></li> 
     <li><a href="#"></a></li> 
     <li><a href="#"></a></li> 
     <li><a href="#"></a></li> 
     <li><a href="#"></a></li> 
     <li><a href="#"></a></li> 
     <li class="visible-xs"><a href="#" class="green"> <i class="ion-android-arrow-back"></i> main site</a></li> 
    </ul> 

    </div> 

CSS：

.navbar-collapse.in {overflow-y: visible;} 
.navbar-collapse:before {border-bottom: 20px solid #fff; border-left: 20px solid transparent; border-right: 20px solid transparent; top: -10px; content: ""; position: absolute; left: 27px; margin-left: -10px; width: 0;height: 0;} 

Answer 1

對於三角形當菜單點擊打開overflow: visible;需要用min-height規則（在投稿一起被應用到.navbar-collapse顯示例如它的寫法不同，因爲我更改了一些規則），但由於它們可能有衝突，因此可以減少一些規則。

使移動導航常數的所有規則都可以刪除媒體查詢，因爲在那裏不會有任何變化，這應該有助於簡化其餘的寫法。

工作實例：（。*所有的規則預先計劃與nav所以他們與Stackovers編輯工作，否則他們不應該是必要的）

nav.navbar { 
 
    background-color: #27402a; 
 
    padding: 20px 0; 
 
    margin-bottom: 0; 
 
    border: 0; 
 
} 
 
nav.navbar .navbar-header { 
 
    float: none; 
 
} 
 
nav.navbar .navbar-toggle { 
 
    display: block; 
 
    float: left; 
 
    margin-left: 20px; 
 
    border: 0; 
 
    z-index: 1055; 
 
} 
 
nav.navbar .navbar-toggle:hover, 
 
nav.navbar .navbar-toggle:focus { 
 
    background-color: transparent; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    border: 0; 
 
} 
 
nav.navbar .navbar-toggle .icon-bar { 
 
    background-color: #fff; 
 
    width: 26px; 
 
} 
 
nav.navbar .navbar-collapse { 
 
    border-top: 1px solid transparent; 
 
    border-left: 1px solid transparent; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    position: fixed; 
 
    top: 88px; 
 
    width: 250px; 
 
    background-color: white; 
 
} 
 
nav.navbar .navbar-collapse:before { 
 
    content: ""; 
 
    margin-top: -40px; 
 
    margin-left: 21px; 
 
    border-top: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-bottom: 20px solid white; 
 
    border-left: 20px solid transparent; 
 
} 
 
nav.navbar .navbar-collapse.collapse { 
 
    display: none!important; 
 
    height: auto!important; 
 
    overflow: visible!important 
 
} 
 
nav.navbar .navbar-nav { 
 
    float: none!important; 
 
    margin-top: 7.5px; 
 
    text-transform: uppercase; 
 
    font-weight: 600; 
 
} 
 
nav.navbar .navbar-nav > li { 
 
    float: none; 
 
} 
 
nav.navbar .navbar-nav > li > a { 
 
    color: #000; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    font-size: 16px; 
 
} 
 
nav.navbar .collapse.in { 
 
    display: block!important; 
 
} 
 
nav.navbar .collapsing { 
 
    transition: height 5ms linear; 
 
} 
 
nav.navbar .navbar-nav .dropdown-menu > li > a, 
 
nav.navbar .navbar-nav .dropdown-menu > li > a:hover, 
 
nav.navbar .navbar-nav .dropdown-menu > li > a:focus { 
 
    color: #000; 
 
} 
 
nav.navbar .navbar-nav .open .dropdown-menu { 
 
    position: static; 
 
    float: none; 
 
    width: auto; 
 
    margin-top: 0; 
 
    background-color: transparent; 
 
    border: 0; 
 
    -webkit-box-shadow: none; 
 
    box-shadow: none; 
 
    font-size: 13px; 
 
} 
 
@media (max-width: 767px) { 
 
    nav.navbar { 
 
    padding: 5px; 
 
    } 
 
    nav.navbar .navbar-collapse { 
 
    top: 58px; 
 
    left: 0; 
 
    } 
 
    nav.navbar .navbar-collapse:before { 
 
    margin-left: 11px; 
 
    margin-top: -30px; 
 
    } 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<nav class="navbar navbar-default navbar-static-top"> 
 

 
    <div class="navbar-header"> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 
    </div> 
 

 
    <div class="navbar-collapse collapse no-transition"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#">All Watches</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"> 
 
      Watches by Brand <span class="caret"></span> 
 
     </a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Link 1</a> 
 
      </li> 
 
      <li><a href="#">Link 2</a> 
 
      </li> 
 
      <li><a href="#">Link 3</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Link 1</a> 
 
     </li> 
 
     <li><a href="#">Link 2</a> 
 
     </li> 
 
     <li><a href="#">Link 3</a> 
 
     </li> 
 
     <li><a href="#">Link 4</a> 
 
     </li> 
 
     <li><a href="#">Link 5</a> 
 
     </li> 
 
     <li><a href="#">Link 6</a> 
 
     </li> 
 
     <li><a href="#">Link 7</a> 
 
     </li> 
 
     <li><a href="#">Link 8</a> 
 
     </li> 
 
     <li><a href="#">Link 9</a> 
 
     </li> 
 
     <li><a href="#">Link 10</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</nav> 
 

 
<div class="container"> 
 
    <div class="alert alert-success"> 
 
    Hello 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>