用於引導切換的動畫'X'圖標

Question

我試圖在頁面縮小時將導航欄中的水平線設置爲'X'。

我的導航欄的代碼如下：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="index.html">Company</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">About<b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
          <li> 
           <a href="about.html">About Us</a> 
          </li> 
          <li> 
           <a href="certification.html">Certification</a> 
          </li> 
          <li> 
           <a href="downloads.html">Download PDF</a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="products.html">Products</a> 
        </li> 
        <li> 
         <a href="inquiry.html">Inquiry</a> 
        </li> 
        <li> 
         <a href="events.html">Events</a> 
        </li> 
        <li> 
         <a href="contact.html">Contact</a> 
        </li> 
        <li> 
         <a href="#">Login</a> 
        </li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 

當我嘗試使用here所示的CSS這是行不通的。有什麼我需要修改我的導航欄專門？我還注意到，當我添加css時：

&:hover { 
    background: transparent !important; 
    } 

閉合大括號不能識別開始的大括號。我錯過了什麼？

Answer 1

這是因爲本教程使用擴展CSS語言的CSS預處理器Less。

但是，您只需使用編譯的CSS，並進行一些更改。

在HTML中，添加一些類的吧，以區分它們：

<span class="icon-bar top-bar"></span> 
<span class="icon-bar middle-bar"></span> 
<span class="icon-bar bottom-bar"></span> 

此外，初始化你的按鈕與類collapsed，或將首先呈現爲「X」。

然後加入編譯CSS：

.navbar-toggle { 
    border: none; 
    background: transparent !important; 
} 
.navbar-toggle:hover { 
    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); 
} 

而現在它應該工作就像一個魅力。

這裏有一個的jsfiddle：Demo