javascript - 在下拉过渡中包含 CSS 三 Angular 形

Question

我有一个常规的 Bootstrap 导航栏，带有一个切换按钮，可以在点击时显示导航栏折叠。我在菜单上方添加了一个三 Angular 形，使其指向汉堡包按钮。我希望下拉菜单按钮显示一个过渡，但在三 Angular 形出现之前会有第二次延迟。如何让三 Angular 形在菜单显示的同时显示在转换中？

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

要在单击菜单时显示三 Angular 形，打开 overflow: visible; 需要应用于 .navbar-collapse 以及 min- height 规则(在发布的示例中，它的写法不同，因为我更改了一些规则)但是您拥有的一些规则可以减少，因为它们可能会发生冲突。

所有使移动导航保持不变的规则都可以删除媒体查询，因为那里不会有任何更改，这应该有助于简化其余部分的编写方式。

工作示例:(*所有规则都以 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>