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导航栏的动画汉堡图标

回答

相关问题