您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“CSS怎么實現滑動門效果”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“CSS怎么實現滑動門效果”這篇文章吧。
滑動門效果的特點:
(1)實用性:能夠根據導航條菜單文本的長度自動調節寬度
(2)簡潔性:可以用簡單的背景圖片來制作好看的導航欄效果
(3)適用性:可以多層套用
案例分享
仿京東首頁菜單導航欄滑動門
我們可以通過給元素設置偽元素的方式來制作滑動門效果,當我們鼠標未在li上時采用dispaly:none隱藏菜單,當鼠標滑過時觸發hover事件此時的dispaly:block顯示菜單。這樣我們利用CSS代碼就可以將滑動門效果制作出來了
<!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;
}
/*滑動門*/
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="#">手機/運營商/數碼</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怎么實現滑動門效果”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。