家好，今天給大家介紹一款，帶圖標的垂直導航菜單的html頁面源碼（圖1）。送給大家哦，獲取方式在本文末尾。

點擊每個按鈕時，都有切換特效，并顯示按鈕的說明，看起來非常不錯（圖2）

代碼完整，需要的朋友可以下載（圖3）

本源碼編碼：10148，需要的朋友，點擊下面的鏈接后，搜索10148，即可獲取。

就愛UI - 分享UI設計的點點滴滴

天的目標是這部分二級彈出導航，思路是：鼠標經過時導航出現，移開后導航隱藏。

·在橫向導航后面添加一個大盒子，寫上基本樣式、寬高背景顏色，看下效果。

·現在寫上絕對定位，讓它脫離外層盒子的限制。同時是相對頂部的盒子定位，需要寫上相對定位代碼：border-bottom-left-radiu，左邊距離0，上面距離140像素，看下效果。

·接下來給盒子里添加內容，跟橫向導航差不多，呦愛哦列表基本格式，再加上一張圖片、兩行文字，內容快速添加，看下效果。

·從外到內依次寫css樣式，給優愛哦添加寬度，左右自動居中，默認的黑點去掉，看下效果。

·見左浮動，從縱向排列變成橫向，給a標簽寫css樣式之前先寫上這句代碼，默認下劃線去掉，顏色設置為黑色，字體大小12像素，文字水平居中，看下效果。

·然后給a標簽加上外邊距，讓它們增加一點距離。

·最后一行文字單獨設置顏色，并把大盒子的背景顏色去掉，看下效果。

·最后讓二級導航的金子先隱藏，給橫向導航增加一個hover類，讓二級導航顯示即可。

到此，今天的學習完成。

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; }

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