Animate bootstrap汉堡菜单穿越

Question

我试图在启动菜单上使我的汉堡图标动起来，当菜单显示时变成十字。

一旦菜单正在显示，它正常工作，但它最初不应该显示十字。任何人都知道我可以让它显示汉堡菜单而不是最初的十字架？

CSS将它从汉堡改为十字。

.navbar-toggle { 
    border: none; 
    background: transparent !important; 
} 
.navbar-toggle .icon-bar { 
    width: 22px; 
    transition: all 0.2s; 
} 
.navbar-toggle .top-bar { 
    transform: rotate(45deg); 
    transform-origin: 10% 10%; 
} 
.navbar-toggle .middle-bar { 
    opacity: 0; 
} 
.navbar-toggle .bottom-bar { 
    transform: rotate(-45deg); 
    transform-origin: 10% 90%; 
} 

.navbar-toggle.collapsed .top-bar { 
    transform: rotate(0); 
} 
.navbar-toggle.collapsed .middle-bar { 
    opacity: 1; 
} 
.navbar-toggle.collapsed .bottom-bar { 
    transform: rotate(0); 
} 

Answer 1

你的CSS不是问题，它是你的HTML。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">应该是<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main-collapse" aria-expanded="false">。

而且<div class="collapse navbar-collapse navbar-ex1-collapse fullwidth navbar-main-collapse">应该<div class="collapse navbar-collapse fullwidth" id="navbar-main-collapse">

/*--- Navigation styles ---*/ 
 

 
#site-nav .company-logo { 
 
    padding-top: 0px; 
 
    padding-bottom: 15px; 
 
    float: left; 
 
    margin-bottom: 5px; 
 
    margin-top: 15px; 
 
} 
 
#site-nav .company-logo img { 
 
    text-align: left; 
 
} 
 
#site-nav .navbar-nav { 
 
    display: block; 
 
    float: none; 
 
} 
 
#site-nav .navbar-inverse { 
 
    background-color: transparent; 
 
    border-color: transparent; 
 
    text-align: center; 
 
    width: 100%; 
 
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; 
 
} 
 
#site-nav .nav > li > a { 
 
    line-height: 1.6em; 
 
    text-decoration: none; 
 
    font-style: normal; 
 
} 
 
#site-nav .navbar-inverse .navbar-nav>li>a { 
 
    color: #8f8e8e; 
 
    font-weight: 400; 
 
    font-size: 16px; 
 
} 
 
#site-nav .navbar-inverse .navbar-nav>li>a:hover { 
 
    color: #022169; 
 
    background-color: transparent; 
 
} 
 
#site-nav .navbar-inverse .navbar-nav>li>a:hover, 
 
#site-nav .navbar-inverse .navbar-nav>li>a:focus, 
 
#site-nav .navbar-inverse .navbar-nav>.open>a, 
 
#site-nav .navbar-inverse .navbar-nav>.open>a:hover, 
 
#site-nav .navbar-inverse .navbar-nav>.open>a:focus { 
 
    background-color: transparent; 
 
    text-decoration: none; 
 
    color: #022169; 
 
} 
 
#site-nav .navbar { 
 
    margin-bottom: 0px; 
 
} 
 
#site-nav { 
 
    position: relative; 
 
    border: 0; 
 
    background-color: black; 
 
    background-color: rgba(35, 35, 35, 1); 
 
} 
 
#site-nav .navbar.navbar-fixed-top { 
 
    margin-top: 0px; 
 
    box-shadow: rgba(0, 0, 0, 1.0) 0px 2px 2px; 
 
} 
 
#site-nav .navbar-nav > li { 
 
    float: none; 
 
    display: inline-block; 
 
} 
 
#site-nav .navbar-toggle { 
 
    float: right; 
 
    text-align: right; 
 
    border: 0px; 
 
    margin-right: 0px; 
 
    margin-top: 38px; 
 
} 
 
#site-nav .navbar-inverse .navbar-toggle:hover, 
 
#site-nav .navbar-inverse .navbar-toggle:focus { 
 
    background: none; 
 
} 
 
#site-nav .navbar-nav > li > .dropdown-menu { 
 
    border-radius: 0px; 
 
} 
 
#site-nav .dropdown-menu > li > a { 
 
    text-align: left; 
 
    font-size: 14px; 
 
    line-height: 1.8em; 
 
} 
 
#site-nav .dropdown-menu > li > a:hover, 
 
.dropdown-menu > li > a:focus { 
 
    text-decoration: none; 
 
    background-color: #f2f2f2; 
 
} 
 
#site-nav .company-logo { 
 
    text-align: left; 
 
    font-family: 'Yanone Kaffeesatz', sans-serif; 
 
    padding-bottom: 0px; 
 
    margin-bottom: 0px; 
 
} 
 
#site-nav .company-logo a { 
 
    color: #022169; 
 
    font-size: 16px; 
 
} 
 
#site-nav .company-logo a:hover { 
 
    text-decoration: none; 
 
} 
 
#site-nav .company-logo span { 
 
    text-align: left; 
 
    font-size: 32px; 
 
    letter-spacing: 1px; 
 
} 
 
#site-nav .navbar-inverse .navbar-toggle .icon-bar { 
 
    background-color: #000; 
 
} 
 
/*--- Responsive Styles ---*/ 
 

 
@media (max-width: 767px) { 
 
    #site-nav .navbar-nav { 
 
    margin: 0; 
 
    } 
 
    #site-nav .navbar-nav { 
 
    display: block; 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
    margin-top: 20px; 
 
    margin-bottom: 20px; 
 
    } 
 
    #site-nav .navbar-nav > li { 
 
    float: none; 
 
    display: inline-block; 
 
    width: 100%; 
 
    } 
 
    #site-nav .navbar-collapse { 
 
    padding: 0px; 
 
    } 
 
    #site-nav .navbar-inverse .navbar-nav > li > a {} #site-nav .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { 
 
    text-decoration: none; 
 
    } 
 
    #site-nav .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover, 
 
    #site-nav .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus { 
 
    color: #022169; 
 
    text-decoration: none; 
 
    background-color: #f2f2f2; 
 
    } 
 
    #site-nav .navbar-inverse .navbar-nav > li > a:hover { 
 
    background-color: #4b4b4b; 
 
    background: none; 
 
    text-decoration: none; 
 
    } 
 
    #site-nav .navbar-inverse .navbar-collapse, 
 
    #site-nav .navbar-inverse .navbar-form { 
 
    border: 0px; 
 
    } 
 
    #site-nav .company-logo { 
 
    padding-bottom: 25px; 
 
    } 
 
} 
 
/* ========================================================================== 
 
    CUSTOM 
 
========================================================================== */ 
 

 
#site-nav, 
 
#footer { 
 
    background-color: #022169; 
 
} 
 
#site-nav .company-logo { 
 
    margin-bottom: 10px; 
 
    margin-top: 10px; 
 
    width: 25%; 
 
} 
 
#site-nav .nav.navbar-nav { 
 
    margin-top: 12px; 
 
} 
 
#site-nav .navbar-inverse .navbar-nav > li > a { 
 
    color: #fff; 
 
    font-weight: lighter; 
 
} 
 
#site-nav .navbar-inverse .navbar-nav > li > a:hover { 
 
    color: #022169; 
 
} 
 
#site-nav .navbar-inverse .navbar-nav > li.link > a:hover, 
 
#site-nav .navbar-inverse .navbar-nav > li.link > a:focus, 
 
#site-nav .navbar-inverse .navbar-nav > .open > a, 
 
#site-nav .navbar-inverse .navbar-nav > .open > a:hover, 
 
#site-nav .navbar-inverse .navbar-nav > .open > a:focus { 
 
    background-color: #022169; 
 
    color: #fff; 
 
} 
 
#site-nav .company-logo img { 
 
    width: 100%; 
 
} 
 
#site-nav .fa.fa-circle.fa-stack-2x { 
 
    color: #fff; 
 
} 
 
#site-nav .insta a { 
 
    padding-right: 5px !important; 
 
} 
 
#site-nav .linkedin a { 
 
    padding-left: 5px !important; 
 
    padding-right: 0px !important; 
 
} 
 
#site-nav .fa-inverse { 
 
    color: #022169; 
 
} 
 
#site-nav .navbar-inverse .navbar-nav > li > a:hover { 
 
    color: #fff; 
 
} 
 
#site-nav .nav.navbar-nav li a { 
 
    padding-bottom: 5px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 
#site-nav .dropdown-menu.navmenu-nav li a:hover { 
 
    border-width: 0; 
 
} 
 
#site-nav .navbar-inverse .navbar-toggle .icon-bar { 
 
    background-color: #fff; 
 
} 
 
@media Screen and (max-width: 991px) { 
 
    #site-nav .company-logo { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    margin-top: 17px; 
 
    } 
 
    #site-nav .company-logo img { 
 
    width: 50%; 
 
    } 
 
} 
 
@media Screen and (max-width: 768px) { 
 
    #site-nav .company-logo img { 
 
    width: 265px; 
 
    } 
 
    #site-nav .company-logo { 
 
    width: 80%; 
 
    text-align: left; 
 
    } 
 
} 
 
#site-nav .navbar-toggle { 
 
    border: none; 
 
    background: transparent !important; 
 
} 
 
#site-nav .navbar-toggle .icon-bar { 
 
    width: 22px; 
 
    transition: all 0.2s; 
 
} 
 
#site-nav .navbar-toggle .top-bar { 
 
    transform: rotate(45deg); 
 
    transform-origin: 10% 10%; 
 
} 
 
#site-nav .navbar-toggle .middle-bar { 
 
    opacity: 0; 
 
} 
 
#site-nav .navbar-toggle .bottom-bar { 
 
    transform: rotate(-45deg); 
 
    transform-origin: 10% 90%; 
 
} 
 
#site-nav .navbar-toggle.collapsed .top-bar { 
 
    transform: rotate(0); 
 
} 
 
#site-nav .navbar-toggle.collapsed .middle-bar { 
 
    opacity: 1; 
 
} 
 
#site-nav .navbar-toggle.collapsed .bottom-bar { 
 
    transform: rotate(0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<section id="site-nav"> 
 
    <div class="container"> 
 
    <nav class="navbar navbar-inverse" role="navigation"> 
 
     <div class="company-logo"> 
 
     <a href=""> 
 
      <img src="http://hanlon.koru.firebrand.co.nz/themes/startertoplight/img/logo-reverse.png" alt="your logo here"> 
 
     </a> 
 
     </div> 
 
     <!--/.logo --> 
 
     <div class="navbar-header page-scroll"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main-collapse" aria-expanded="false"> <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 class="collapse navbar-collapse fullwidth" id="navbar-main-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="link"><a href=/new-content-page/>Our Team</a> 
 
      </li> 
 
      <li class="link"><a href=/new-content-page-2/>Our Services</a> 
 
      </li> 
 
      <li class="link"><a href=/our-projects/>Our Projects</a> 
 
      </li> 
 
      <li class="link"><a href=/working-for-us/>Working For Us</a> 
 
      </li> 
 
      <li class="link"><a href=/contact/>Contact</a> 
 
      </li> 
 
      <li class="insta"><a href=http://www.instagram.com><span class="fa-stack fa-lg"> 
 
        <i class="fa fa-circle fa-stack-2x"></i> 
 
        <i class="fa fa-instagram fa-stack-1x fa-inverse"></i> 
 
        </span> 
 
       </a> 
 

 
      </li> 
 
      <li class="linkedin"><a href=http://linkedin.com><span class="fa-stack fa-lg"> 
 
        <i class="fa fa-circle fa-stack-2x"></i> 
 
        <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i> 
 
        </span> 
 
       </a> 
 

 
      </li> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
    </nav> 
 
    <!-- /.col --> 
 
    </div> 
 
    <!-- /.container --> 
 
</section>

Answer 2

我检查了您网站上的菜单元素。不用担心解决这个问题非常容易。问题是您省略将collapsed类添加到button.navbar-toggle元素。这样可以很好地解决你的问题。希望有所帮助。