這篇文章將為大家詳細(xì)講解有關(guān)純css代碼如何實(shí)現(xiàn)下拉菜單效果的方法,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、商城系統(tǒng)網(wǎng)站開發(fā),微信平臺(tái)小程序開發(fā),軟件按需搭建網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn),我們會(huì)仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合,為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案,創(chuàng)新互聯(lián)公司更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。
實(shí)現(xiàn)方法:
1、用ul 和 li標(biāo)簽寫一個(gè)關(guān)聯(lián)結(jié)構(gòu)(ul 和 li的父子關(guān)系渾然天成,一般的關(guān)聯(lián)結(jié)構(gòu)都用它們)
<ul class="nav"> <a href="#">服裝</a> <ul class="plat"> <li><a href="#">襯衫</a></li> <li><a href="#">棉襖</a></li> <li><a href="#">褲衩</a></li> </ul> </ul>
2、對(duì)界面進(jìn)行初始化(萬金油式開頭)
*{ padding: 0; margin: 0; }
3、給ul 和 a標(biāo)簽添加樣式(這里大家可以自由發(fā)揮)
ul,a{ font-size: 20px; list-style: none; text-decoration: none; background-color: #3C3C3C; color: #FFFFFF; width: 100px; text-align: center; border: 0px solid black; border-radius: 5px; /*圓角*/ margin-top: 1px; } a{ display: block; }
4、將.plat部分的內(nèi)容隱藏起來
.plat{ display: none; }
5、(重頭戲來了) 對(duì)第一個(gè)a標(biāo)簽用:hover選擇器;實(shí)現(xiàn)功能:當(dāng)鼠標(biāo)劃過a標(biāo)簽時(shí),隱藏部分內(nèi)容可見
.nav:hover .plat{ display: block; clear: both; }
6、至此功能已經(jīng)實(shí)現(xiàn),大家可以自己添加樣式來優(yōu)化用戶體驗(yàn)
例如:
菜單欄橫向排列:
.nav{ float: left; margin-left: 1px; }
鼠標(biāo)滑過欄目,提醒其位置
`.plat li:hover>a{ background-color: dimgrey; }`
效果:
(學(xué)習(xí)視頻推薦:css視頻教程)
全部代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul,a{ font-size: 20px; list-style: none; text-decoration: none; background-color: #3C3C3C; color: #FFFFFF; width: 100px; text-align: center; border: 0px solid black; border-radius: 5px; margin-top: 1px; } a{ display: block; } .plat{ display: none; } .nav{ float: left; margin-left: 1px; } .nav:hover .plat{ display: block; clear: both; } .plat li:hover>a{ background-color: dimgrey; } </style> </head> <body> <ul> <a href="#">服裝</a> <ul> <li><a href="#">襯衫</a></li> <li><a href="#">棉襖</a></li> <li><a href="#">褲衩</a></li> </ul> </ul> <ul> <a href="#">服裝</a> <ul> <li><a href="#">襯衫</a></li> <li><a href="#">棉襖</a></li> <li><a href="#">褲衩</a></li> </ul> </ul> <ul> <a href="#">服裝</a> <ul> <li><a href="#">襯衫</a></li> <li><a href="#">棉襖</a></li> <li><a href="#">褲衩</a></li> </ul> </ul> </body> </html>
關(guān)于純css代碼如何實(shí)現(xiàn)下拉菜單效果的方法就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
當(dāng)前標(biāo)題:純css代碼如何實(shí)現(xiàn)下拉菜單效果的方法
文章出自:http://muchs.cn/article38/ipgspp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站營銷、品牌網(wǎng)站制作、軟件開發(fā)、Google、虛擬主機(jī)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)