CSS3制作炫酷的下拉菜單及彈起式選單的實(shí)例分享

abgne 發(fā)布時(shí)間：2016-05-17 11:58:57 作者：佚名

這篇文章主要介紹了CSS3制作炫酷的下拉菜單及彈起式選單的實(shí)例分享,當(dāng)然菜單上如果要實(shí)現(xiàn)更多動(dòng)態(tài)效果的話還是需要JavaScript的幫助才行,需要的朋友可以參考下

下拉菜單
先直接來(lái)看效果是怎樣：
2016517120325127.gif (550×273)

當(dāng)鼠標(biāo)移到選單之后，下方會(huì)展開(kāi)并有其它說(shuō)明內(nèi)容，我這邊是把展開(kāi)的部份加上圖片內(nèi)容，讓它有其它不同的變化。因?yàn)檫@樣的動(dòng)作就像人家廟會(huì)時(shí)會(huì)有舞獅從嘴里丟下賀聯(lián)一樣，所以我才取名為"賀聯(lián)式選單"。

這樣的效果其實(shí)只需要 HTML 及 CSS 配合就能做出來(lái)了，我們先來(lái)看 HTML 的部份：
檢視原始碼 HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<body>
<ul>
<li>
<a class="t1" href="#">梅干桑
<div>自我介紹</div>
</a>
</li>
<li>
<a class="t2" href="#">Photoshop
<div>上課囉!!</div>
</a>
</li>
<li>
<a class="t3" href="#">Q ＆ A
<div>問(wèn)題討論</div>
</a>
</li>
<li>
<a class="t4" href="#">男丁格爾</a>
</li>
<li>
<a class="t5" href="#">人材
<div>丁丁是人材</div>
</a>
</li>
<li>
<a class="t6" href="#">格言
<div>好話大家說(shuō)</div>
</a>
</li>
<li>
<a class="t7" href="http://www.wowgame.tw">WOWGame</a>
</li>
</ul>
</body>

使用 UL 及 LI 來(lái)做選單的項(xiàng)目，每一個(gè) LI 中的 A 連結(jié)是我們主要的選單內(nèi)容，而其 DIV 是更進(jìn)階的描述內(nèi)容，若不需要的話則可以不用加。因?yàn)槲乙屆總€(gè)選單都有不同的背景圖，所以還需要幫 A 連結(jié)都加一個(gè)獨(dú)立的 class。

然后，我有 7 個(gè) LI 選單項(xiàng)目，因此我還請(qǐng)梅干幫忙準(zhǔn)備了 7 張圖片(果然還是要專業(yè)的來(lái))。接著就能開(kāi)始動(dòng)手寫 CSS 囉：
檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
float: left;
}
ul li a {
width: 100px;
height: 50px;
display: block;
line-height: 50px;
overflow: hidden;
text-align: center;
text-decoration: none;
color: #fff;
}
ul li a:hover {
height: 150px;
}
ul li a div {
color: #fff;
line-height: 16px;
font-weight: bold;
margin-top: 73px;
padding-top: 7px;
border-top: 1px dotted #fff;
}
.t1 { background: #08f2d6 url(01.gif); }
.t2 { background: #1209f1 url(02.gif); }
.t3 { background: #a202e2 url(03.gif); }
.t4 { background: #f4e603 url(04.gif); }
.t5 { background: #55df07 url(05.gif); }
.t6 { background: #02a8f3 url(06.gif); }
.t7 { background: #f6025e url(07.gif); }

這邊用到的 CSS 語(yǔ)法都是很基礎(chǔ)的，比較需要注意的是我們一開(kāi)始 A 連結(jié)的 height 是 50px，所以超過(guò)的部份會(huì)因?yàn)?overflow 為 hidden 的關(guān)系而被隱藏起來(lái)；另外，當(dāng)鼠標(biāo)移到 A 連結(jié)后，再額外訂了一個(gè) a:hover { } 來(lái)把它的 height 撐高，因此原本看不到的背景部份就會(huì)顯現(xiàn)出來(lái)了。

到這邊就整個(gè)都完成了，一開(kāi)始瀏覽時(shí)就只有一排的選單
2016517120404165.gif (550×98)

當(dāng)鼠標(biāo)移到選項(xiàng)后就會(huì)顯示完整的背景內(nèi)容
2016517120430837.gif (550×273)

且我們的選單一樣是有超連結(jié)的功能，是不是很有趣呢！如果要讓效果更優(yōu)的話，當(dāng)然還是需要 JavaScript 的配合才行?。?/p>

彈起式頁(yè)簽選單
一樣先直接來(lái)看效果是怎樣：
2016517120447470.gif (450×150)

跟上一個(gè)例子不同的是在此次是鼠標(biāo)移到選單后會(huì)往上升，就象是突然彈起來(lái)一樣。

這樣的效果一樣只需要 HTML 及 CSS 就能做出來(lái)了，我們先來(lái)看 HTML 的部份：

檢視原始碼 HTML

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<body>
<ul id="menu">
<li><a href="#" class="home">首頁(yè)</a></li>
<li><a href="#" class="car">購(gòu)物車</a></li>
<li><a href="#" class="good">推薦商品</a></li>
<li><a href="#" class="query">訂單查詢</a></li>
</ul>
</body>

同樣是用 UL 及 LI 來(lái)做選單的項(xiàng)目，每一個(gè) LI 中的 A 連結(jié)是我們主要的選單內(nèi)容，且為了讓每個(gè)選單都有不同的選單圖片，所以還幫 A 連結(jié)都加一個(gè)獨(dú)立的 class。

接著開(kāi)始動(dòng)手寫 CSS 囉：
檢視原始碼 CSS

CSS Code復(fù)制內(nèi)容到剪貼板

#menu {
margin: 20px 0 0;
padding: 0;
height: 62px; /* 選單圖片的高 */
list-style: none;
overflow: hidden;
width: 432px; /* 98 * 4 + 5 * 8 */
border-bottom: 1px solid #ccc;
}
#menu li {
float: left;
padding: 0 5px;
}
#menu li a {
display: block;
width: 98px; /* 選單圖片的寬 */
height: 62px; /* 選單圖片的高 */
line-height: 62px; /* ie suck */
text-indent: -9999px;
margin-top: 31px; /* 需要設(shè)定為圖片寬/2 */
background-repeat: no-repeat;
}
#menu li a:hover {
margin-top: 1px; /* 當(dāng)鼠標(biāo)移到選單上時(shí)... */
}
/* 幫每一個(gè) A 連結(jié)都加入不同選單圖片 */
.home {background:url(home.gif);}
.car {background:url(car.gif);}
.good {background:url(good.gif);}
.query {background:url(query.gif);}

這邊要注意的是 A 連結(jié)的 margin-top 是選單圖片高的一半 - 31px，所以超過(guò)的部份就不會(huì)顯示出來(lái)；另外，當(dāng)鼠標(biāo)移到 A 連結(jié)后，再額外訂了一個(gè) a:hover { } 來(lái)減少它的 margin-top，因此原本看不到的背景部份就會(huì)顯現(xiàn)出來(lái)了。

到這邊就整個(gè)都完成了，一開(kāi)始瀏覽時(shí)就只有一排的選單
2016517120527346.gif (450×97)