Question

我从1个导航栏开始，点击它会将汉堡图标设置为“x＆＃39;”。我添加了另一个带有另一个汉堡的导航栏，但现在动画不再适用。为了在一个页面上有多个导航栏，您需要将数据目标从#navbar更改为其他内容，但是一旦我这样做，我就丢失了动画。有什么想法吗？

<nav class="navbar white navbar-default">
      <div class="logo"></div>
        <div class="container-fluid">
         <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".mainnav" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
          </div>
          <div id="navbar" class="navbar-collapse collapse mainnav">
            <ul class="nav navbar-nav">
              <li><a class="scroller" href="#proj-head">projects</a></li>
              <li><a href="#section3">studio</a></li>
              <li><a href="#section4">press</a></li>
              <li><a href="#section6">Contact</a></li>
              <li><a href="https://www.linkedin.com/profile/view?id=192958931"><i class="fa fa-linkedin"></i></a></li>          
              <li><a href="http://instagram.com/STUDIOSC_NYC"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

为了空间，第二个导航与＆＃34; .secondarynav＆＃39;相同。作为数据目标。而css是：

.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
}
.navbar-default .navbar-toggle {position:relative; padding-top:20px; z-index:100}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform-origin: 10% 10%;
  -webkit-transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
  -webkit-transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
  -webkit-transform: rotate(0);
}

Answer 1

我能够通过将按钮的“数据目标”更改为导航的id，而不是“.mainnav”类来实现它。

data-target="#navbar"

https://jsfiddle.net/partypete25/vc3sw8r5/3/

一旦我做到了，它就有效了。所以我将它重命名为navbar-1，然后复制它以创建第二个，命名为navbar-2。

Answer 2

为您修复并使其更易于管理：）

HTML：

import styles from "./Styles"

CSS：

<nav class="navbar white navbar-default">
      <div class="logo"></div>
        <div class="container-fluid">
         <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".mainnav" aria-expanded="false" aria-controls="navbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
          </div>
          <div id="navbar" class="navbar-collapse collapse mainnav">
            <ul class="nav navbar-nav">
              <li><a class="scroller" href="#proj-head">projects</a></li>
              <li><a href="#section3">studio</a></li>
              <li><a href="#section4">press</a></li>
              <li><a href="#section6">Contact</a></li>
              <li><a href="https://www.linkedin.com/profile/view?id=192958931"><i class="fa fa-linkedin"></i></a></li>          
              <li><a href="http://instagram.com/STUDIOSC_NYC"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

JS：

.navbar-toggle .icon-bar:nth-of-type(2) {
      top: 1px;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
    top: 2px;
}

.navbar-toggle .icon-bar {
      position: relative;
      transition: all 500ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
      top: 6px;
      transform: rotate(45deg);
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
      background-color: transparent;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
      top: -6px;
      transform: rotate(-45deg);
}

CODEPEN DEMO

多个Bootstrap导航栏

2 个答案: