帶圖標(biāo)和按鈕切換特效的垂直導(dǎo)航菜單的html頁(yè)面源碼

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

圖1

點(diǎn)擊每個(gè)按鈕時(shí)，都有切換特效，并顯示按鈕的說(shuō)明，看起來(lái)非常不錯(cuò)（圖2）

圖2

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

圖3

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

就愛(ài)UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴

天的目標(biāo)是這部分二級(jí)彈出導(dǎo)航，思路是：鼠標(biāo)經(jīng)過(guò)時(shí)導(dǎo)航出現(xiàn)，移開(kāi)后導(dǎo)航隱藏。

·在橫向?qū)Ш胶竺嫣砑右粋€(gè)大盒子，寫(xiě)上基本樣式、寬高背景顏色，看下效果。

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

·接下來(lái)給盒子里添加內(nèi)容，跟橫向?qū)Ш讲畈欢啵蠍?ài)哦列表基本格式，再加上一張圖片、兩行文字，內(nèi)容快速添加，看下效果。

·從外到內(nèi)依次寫(xiě)css樣式，給優(yōu)愛(ài)哦添加寬度，左右自動(dòng)居中，默認(rèn)的黑點(diǎn)去掉，看下效果。

·見(jiàn)左浮動(dòng)，從縱向排列變成橫向，給a標(biāo)簽寫(xiě)css樣式之前先寫(xiě)上這句代碼，默認(rèn)下劃線(xiàn)去掉，顏色設(shè)置為黑色，字體大小12像素，文字水平居中，看下效果。

·然后給a標(biāo)簽加上外邊距，讓它們?cè)黾右稽c(diǎn)距離。

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

·最后讓二級(jí)導(dǎo)航的金子先隱藏，給橫向?qū)Ш皆黾右粋€(gè)hover類(lèi)，讓二級(jí)導(dǎo)航顯示即可。

到此，今天的學(xué)習(xí)完成。

果圖

html部分：先寫(xiě)用div畫(huà)好六個(gè)導(dǎo)航的卡片，再利用css添加響應(yīng)效果

<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部分：通過(guò)hover選擇器和transition屬性實(shí)現(xiàn)導(dǎo)航響應(yīng)式操作，即可實(shí)現(xiàn)如圖效果

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;
}
//添加導(dǎo)航的響應(yīng)式效果
.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; }

然后就能實(shí)現(xiàn)我們這個(gè)實(shí)用又美觀的側(cè)邊導(dǎo)航欄啦

在線(xiàn)咨詢(xún)

上一篇：HTML5實(shí)例002-1分鐘用javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
下一篇：圖片輪播的實(shí)現(xiàn)：HTML+CSS+ JavaScript

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。