這篇文章給大家分享的是有關(guān)使用CSS3實(shí)現(xiàn)導(dǎo)航下拉菜單的方法的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括柳北網(wǎng)站建設(shè)、柳北網(wǎng)站制作、柳北網(wǎng)頁制作以及柳北網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,柳北網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到柳北省份的部分城市,未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
使用css3實(shí)現(xiàn)導(dǎo)航下拉菜單的原理
首先要使用HTML當(dāng)中的<ul><li></li></ul>進(jìn)行菜單的制作,然后我們會(huì)用到一個(gè)hover語句,即鼠標(biāo)懸停在某個(gè)區(qū)域內(nèi)的時(shí)候,觸發(fā)下級(jí)菜單的顯示,其中需要了解到的是display的屬性,我們將會(huì)使用block和none的屬性實(shí)現(xiàn)下拉菜單的出現(xiàn)和隱藏。然后我們會(huì)給各個(gè)菜單定義position來確定菜單的位置,最后使用::after偽元素選擇器來清除浮動(dòng)。
使用css3實(shí)現(xiàn)導(dǎo)航下拉菜單的步驟
步驟一:利用HTML制作出菜單樣式
<nav> <ul> <li><a href="#">導(dǎo)航一</a> <ul> <li><a href="#">二級(jí)導(dǎo)航</a></li> <li><a href="#">二級(jí)導(dǎo)航</a></li> <li><a href="#">二級(jí)導(dǎo)航</a></li> <li><a href="#">二級(jí)導(dǎo)航</a></li> </ul> </li> <li><a href="#">導(dǎo)航二</a></li> <li><a href="#">導(dǎo)航三</a> <ul> <li><a href="#">二級(jí)導(dǎo)航</a></li> <li><a href="#">二級(jí)導(dǎo)航</a></li> <li><a href="#">二級(jí)導(dǎo)航</a> <ul> <li><a href="#">三級(jí)導(dǎo)航</a></li> <li><a href="#">三級(jí)導(dǎo)航</a></li> <li><a href="#">三級(jí)導(dǎo)航</a></li> </ul> </li> <li><a href="#">二級(jí)導(dǎo)航</a></li> </ul> </li> <li><a href="#">導(dǎo)航四</a> <ul> <li><a href="#">二級(jí)導(dǎo)航</a></li> <li><a href="#">二級(jí)導(dǎo)航</a></li> <li><a href="#">二級(jí)導(dǎo)航</a></li> </ul> </li> <li><a href="#">導(dǎo)航五</a> <ul> <li><a href="#">二級(jí)導(dǎo)航</a></li> <li><a href="#">二級(jí)導(dǎo)航</a></li> </ul> </li> <li><a href="#">導(dǎo)航六</a></li> </ul> </nav>
步驟二:利用css3實(shí)現(xiàn)鼠標(biāo)懸停觸發(fā)的下拉菜單
nav { margin:100px auto; text-align:center; } nav ul { border-radius:10px; background:linear-gradient(to bottom,#efefef,#bbbbbb); padding:0 20px; display:inline-table; position:relative; box-shadow:1px 1px 3px #666; } nav ul ul { display:none; } nav ul li { float:left; } nav ul::after { content:""; display:block; clear:both; } nav ul li a { display:block; padding:25px 40px; color:#000; text-decoration:none; font-family:"微軟雅黑"; } nav ul li:hover > ul { display:block; } nav ul li:hover { background:linear-gradient(to bottom,#4f5964,#5f6975); } nav ul li:hover a { color:#FFF; } nav ul ul { background:#5f6975; border-radius:0; position:absolute; top:100%; padding:0; } nav ul ul li { float:none; border-top:1px solid #6b727c; border-bottom:1px solid #575f6a; } nav ul ul li a { color:#FFF; } nav ul ul li a:hover { background:#4b545f; } nav ul ul ul { width:100%; position:absolute; left:100%; top:50%; }
步驟三:根據(jù)菜單樣式的要求進(jìn)行美化
下拉菜單樣式如圖所示
感謝各位的閱讀!關(guān)于使用CSS3實(shí)現(xiàn)導(dǎo)航下拉菜單的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
當(dāng)前文章:使用CSS3實(shí)現(xiàn)導(dǎo)航下拉菜單的方法
URL鏈接:http://m.newbst.com/article6/ggpsig.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、虛擬主機(jī)、網(wǎng)站營銷、動(dòng)態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)