航條效果圖：

我們先來看一下，首先這個整體我們可以看成一個大盒子，盒子的背景顏色為白色。

然后看一下整體的話是占到整個導航條的80%左右，上圖紅色框圈出的范圍。

這個盒子又分為兩個部分，左側的logo部分，右側的導航部分。

整個布局用到的是flex布局：

大家可以去看一下阮一峰老師的教程：

阮一峰flex布局

左側logo部分我們用到的標簽有：

1、h3標簽：

<h3><a href="index.html">多多魚網頁</a></h3>

h3是一對有開始有閉合的標簽組合。以<h3>開始，以</h3>結束。

html h3標簽主要用于布局標題、欄目類內容，h3與h1最大標題標簽相比，h1標簽一般一個網頁中使用一次，而h3標簽可以在一個網頁中多次使用。默認CSS h3又比h2文字大小小一點。

html h3標簽常見應用地方：

欄目標題可以使用h3標簽
文章標題可以使用h3標簽
文章標題列表可以使用h3標簽（一般圖文列表中，圖片使用img引入，文章標題文字使用h3標簽）

2、a標簽：

<a href="index.html">多多魚網頁</a>

<a> 標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。

<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標。

在所有瀏覽器中，鏈接的默認外觀是：

未被訪問的鏈接帶有下劃線而且是藍色的

已被訪問的鏈接帶有下劃線而且是紫色的

活動鏈接帶有下劃線而且是紅色的

右側的導航部分我們用到的標簽有：

一、無序列表簡介

無序列表，很好理解，有序列表的列表項是有一定順序的，而無序列表的列表項是沒有順序的。默認情況下，無序列表的項目符號是●，不過可以通過無序列表type屬性來改變無序列表的列表項符號。

語法：

<ul>
    <li>無序列表項</li>
    <li>無序列表項</li>
    <li>無序列表項</li>
</ul>

說明：

<ul>，即“unordered list（無序列表）”。<li>，即“list（列表項）”。理解標簽語義更有利于你記憶，而記憶HTML標簽的語義是HTML的基礎。

在該語法中，使用<ul></ul>標簽表示一個無序列表的開始和結束，<li>表示這是一個列表項。在一個無序列表中可以包含多個列表項。

注意，<ul>標簽和<li>標簽也是配合使用，沒有單獨使用，而且<ul>標簽內部不能存在任何其他標簽，一般情況下只能存在<li>標簽（對于初學者，我們忽略嵌套列表）。這個概念要非常清楚，在網站開發后期很容易犯錯。（這個情況跟有序列表一樣）。

右側導航代碼：

<ul>
   <li class="active">
	<a href="index.html">首頁</a>
   </li>
   <li>
	<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>

視屏教程：

html部分：先寫用div畫好六個導航的卡片，再利用css添加響應效果

<div class='card-holder'>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-01'>
                <span class='card-content'>item #1</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-02'>
                <span class='card-content'>long menu item #2</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-03'>
                <span class='card-content'>menu item #3</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-04'>
                <span class='card-content'>item #4</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-05'>
                <span class='card-content'>menu item #5</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-06'>
                <span class='card-content'>long menu item #1</span>
            </div>
        </a>
    </div>
</div>

css部分：通過hover選擇器和transition屬性實現導航響應式操作，即可實現如圖效果

a:link,
a:hover,
a:visited,
a:active {
  color: #fff;
  text-decoration: none;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}
.card-holder {  
  position: fixed;
  width: 0px;
  overflow: visible;
}
.card-wrapper {
  display: inline-block;
  float: right;
  clear: both;
}
.card {
  position: relative;
  left: 32px;
  padding: 16px 32px 16px 64px;
  margin: 8px;  
  background: #fff;
  transition: all 0.3s ease-in-out 0.1s;
}
//添加導航的響應式效果
.card:hover {
  position: relative;
  left: 100%;
  margin-left: -32px;
  transition: all 0.3s ease-in-out;
}
.card-content {
  display: inline-block;
  color: #fff;
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}
.bg-01 { background: #539770; }
.bg-02 { background: #4B7D74; }
.bg-03 { background: #8DC2BC; }
.bg-04 { background: #EDD6B4; }
.bg-05 { background: #BE7467; }
.bg-06 { background: #E2AE63; }

然后就能實現我們這個實用又美觀的側邊導航欄啦