html - 动画 Bootstrap 汉堡菜单交叉

Question

我正在尝试将 Bootstrap 菜单上的汉堡图标设置为动画，使其在显示菜单时变成十字。

一旦菜单显示，它就可以正常工作，但它最初不应该显示叉号。有谁知道我如何让它最初显示汉堡菜单而不是十字？

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>