背景

導航對于一個網站重要性，不言而喻。網站上導航一般都置于網站的頂端，每一個導航項都直接詳細的列出來，但如果需要去適配移動端的話這樣簡單粗暴的方法就不大可行了，因為受移動端屏幕寬度所限，在電腦端完美顯示的布局在移動端可能就亂掉了（好吧，這是個人碼的第一篇博客，之前也沒有過寫文章的經驗，對于“亂掉了”這樣口語化的措辭，我也很無奈啊...），所以我們需要為移動端設計專屬的導航欄樣式。大多數的設計是用一個漢堡按鈕（好像是這么叫的？）來代替原來的導航欄，然后通過點擊這個按鈕來顯示或隱藏之。這篇博客就算作在了解了Bootstrap的實現方法原理之后的筆記。

實現原理

直接上代碼吧

• HTML部分

    <nav>
      <div class="navbar-header">
        <!-- 確保無論是寬屏還是窄屏，navbar-brand都顯示 -->
        <a href="##" class="navbar-brand">XX網</a>
      　<!-- .navbar-toggle樣式用于toggle收縮的內容，即nav-collapse collapse樣式所在元素 -->
        <button class="navbar-toggle" type="button">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <!-- 屏幕寬度小于768px時，div.navbar-responsive-collapse容器里的內容都會隱藏，顯示icon-bar圖標，當點擊icon-bar圖標時，再展開。屏幕大于768px時，默認顯示。 -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="##">網站首頁</a></li>
          <li><a href="##">系列教程</a></li>
          <li><a href="##">名師介紹</a></li>
          <li><a href="##">成功案例</a></li>
          <li><a href="##">關于我們</a></li>
          </ul>
      </div>
    </nav>

這部分幾乎和Bootstrap對應代碼完全一致，導航欄的HTML結構顯而易見：

- nav
  - div.navbar-header
    - a.navbar-brand
    - button.navbar-toggle（漢堡按鈕）
  - div.navbar-collapse（實際導航欄）
    - ul.nav

當視窗寬度大于768px時，直接顯示實際導航欄就好，漢堡按鈕不顯示；小于768px時，顯示漢堡按鈕，然后實際導航欄的顯示則通過點擊漢堡按鈕由JS來實現導航欄的隱藏和顯示，兩種情況下導航欄的布局考驗的則是對CSS的運用，整個實現原理就是這樣。

說到CSS，感覺用好這個東西來寫一個布局清晰樣式精美的網頁很費力（應該是練的太少了，其實自己到現在寫的頁面，一只手都能數的過來，所以還是太急躁了吧。。。），倒不是CSS原理不懂，就是寫出來的東西真沒法看，人說CSS是藝術真不是假的。說這幾句廢話，其實我只是想拖延下貼慘不忍睹的CSS代碼

• CSS部分

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  text-decoration: none;
  color: blue;
}
a:hover {
  text-decoration: underline;
}
ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  }
nav {
  height: 90px;
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  background-color: lightblue;
}
.navbar-header {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}     
.navbar-toggle {
  height: 37px;
  display: none;
  border: none;
  background-color: green;
  border-radius: 2px;
  cursor: pointer;
}
.navbar-toggle span {
  display: block;
  width: 2em;
  margin: 3px 0;
  border-bottom: 2px solid #fff;
}
.navbar-brand {
  display: block;
}
.navbar-nav li {
  display: inline-block;
  padding: .5em;
  background-color: lightgreen;
}

@media(max-width: 768px) {
  nav {
    display: block;
  }
  .navbar-header {
    margin-top: 6.5px;
  }  
  .navbar-toggle {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }
  .collapse {
    display: none;
  } 
  .navbar-collapse {
    position: relative;
    top: 26.5px;
  }
  .navbar-collapse li {
    width: 100%;
    border-bottom: 1px solid #fff;;
    text-align: center;
  }
}

因為前些日子看了CSS3里flex的屬性，剛好這里就盡量用flex來寫的布局，發現屬性是真好用；當然好用并不一定隨隨便便就能用好，所以為了讓導航欄里的內容的位置在兩種情況下都相對固定，湊了好幾個元素的固定長度值，所以寫得爛我心里是有點逼數的。

JS的部分就簡單了，三條語句，獲取元素A，獲取元素B，在A上綁定事件，事件觸發時操縱B。所以覺得JS比CSS簡單是有理由的吧。

• JS部分

var toggleBtn = document.querySelector('.navbar-toggle')
var collapsedElm = document.querySelector('.navbar-collapse')
toggleBtn.addEventListener('click', function() {
  collapsedElm.classList.toggle('collapse')

代碼貼完了再貼下效果圖吧，主要看效果，配色什么的忽視就好了

效果圖

• >786px

  
  
  image.png

• <786px

  
  
  image.png
  
  
  image.png

好了，都貼完了，就這么點東西么（圖里的那么大片空白肯定是故意占地方的）？是的，就這么點……總結下。

總結

打個比方，CSS好比是一個人的外表，JS好比是能力，外表不好看都不會有表現的機會，所以包裝是有必要而且關鍵的，同理CSS也是很重要的，先把CSS學熟練吧，起碼達到寫出的頁面能勾起別人繼續看下去的興趣的程度。

第一篇出來就好辦了，第二篇、第三篇……都會源源不斷的。