Multiple Bootstrap導航欄的動畫漢堡圖標

我從1個導航欄開始，點擊時會將漢堡圖標製作爲'x'。我用另一個漢堡添加了一個附加的導航欄，但現在動畫不再適用於其他任何一個。爲了在一個頁面上擁有多個導航欄，您需要將數據目標從#navbar更改爲其他內容，但是一旦我這樣做了，我就會丟失我的動畫。有任何想法嗎？Multiple Bootstrap導航欄的動畫漢堡圖標

<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>

出於節省空間的考慮，第二導航是同樣的事情只是」 .secondarynav」作爲數據目標而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); 
}

來源

2015-11-09 darnen

我能得到它的工作通過改變按鈕的「數據目標」，以該資產淨值的ID，而不是班級'.mainnav'。

data-target="#navbar"

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

一旦我做到了，它的工作。所以我將其重命名爲navbar-1，並將其重複創建第二個，將其命名爲navbar-2。

來源

2015-11-09 01:40:10 partypete25

爲您解決並取得它易於管理:)

HTML：

<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>

CSS：

個

.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); 
}

JS：

$(document).ready(function() { 
       $(".navbar-toggle").on("click", function() { 
        $(this).toggleClass("active"); 
       }); 
     });

CODEPEN DEMO

來源

2015-11-09 01:35:13

Multiple Bootstrap導航欄的動畫漢堡圖標

回答

相關問題