您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“CSS怎么實(shí)現(xiàn)滑動(dòng)門效果”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS怎么實(shí)現(xiàn)滑動(dòng)門效果”這篇文章吧。
滑動(dòng)門效果的特點(diǎn):
?。?)實(shí)用性:能夠根據(jù)導(dǎo)航條菜單文本的長(zhǎng)度自動(dòng)調(diào)節(jié)寬度
?。?)簡(jiǎn)潔性:可以用簡(jiǎn)單的背景圖片來(lái)制作好看的導(dǎo)航欄效果
(3)適用性:可以多層套用
案例分享
仿京東首頁(yè)菜單導(dǎo)航欄滑動(dòng)門
我們可以通過(guò)給元素設(shè)置偽元素的方式來(lái)制作滑動(dòng)門效果,當(dāng)我們鼠標(biāo)未在li上時(shí)采用dispaly:none隱藏菜單,當(dāng)鼠標(biāo)滑過(guò)時(shí)觸發(fā)hover事件此時(shí)的dispaly:block顯示菜單。這樣我們利用CSS代碼就可以將滑動(dòng)門效果制作出來(lái)了
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<style>
*{
padding:0;
margin:0;
list-style:none;
text-decoration:none;
}
ul{
padding:20px0px;
width:200px;
background:#fff;
border:1pxsolid#ccc;
position:relative;
}
ulli{
height:40px;
line-height:40px;
padding-left:10px;
}
ulli:hover{
background:#ccc;
}
ullia{
color:#444;
font-size:14px;
}
/*滑動(dòng)門*/
ul.div1,.div2,.div3{
position:absolute;
top:0;
left:200px;
display:none;
}
ulli:hover.div1{
display:block;
width:800px;
opacity:1;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<ahref="#">手機(jī)/運(yùn)營(yíng)商/數(shù)碼</a>
<divclass="div1">
</div>
</li>
<li>
<ahref="#">電腦/辦公</a>
<divclass="div2"></div>
</li>
<li>
<ahref="#">家居/家具/家裝</a>
<divclass="div3"></div>
</li>
<li>
<ahref="#">男裝/女裝/童裝</a>
<divclass="div3"></div>
</li>
</ul>
</div>
</body>
</html>
以上是“CSS怎么實(shí)現(xiàn)滑動(dòng)門效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。