本文介绍了一个基于 HTML5 和 CSS 实现的折叠导航栏示例。通过:hover伪类结合过渡效果，使得导航栏在鼠标悬停时展开，离开时自动隐藏。此示例使用了简单的 HTML 结构和 CSS 样式。
html5--6-57 阶段练习6-折叠导航栏
实例
1 @charset="UTF-8"; 2 3 *{ 4 margin:0; 5 padding:0; 6 } 7 8 h3+div{ 9 height: 0; 10 overflow: hidden; 11 transition: all 1s ease; 12 } 13 14 a{ 15 text-decoration: none; 16 } 17 18 .se{ 19 width: 200px; 20 float: left; 21 background: rgba(180,60,30,0.3); 22 margin-top:3px; 23 margin-left: 20px; 24 } 25 26 h3{ 27 background: rgba(180,80,30,0.8); 28 padding: 5px 25px; 29 border-radius: 20px; 30 } 31 32 .se:hover h3+div { 33 height: 350px; 34 overflow: auto; 35 }
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>折叠导航栏</title> 6 <link rel="stylesheet" type="text/css" href="but.css"> 7 </head> 8 <body> 9 <div class="se"> 10 <h3><a href="">IT</a></h3> 11 <div><img src="../img/IT.png" alt=""></div> 12 </div> 13 <div class="se"> 14 <h3><a href="">创投</a></h3> 15 <div><img src="../img/创投.png" alt=""></div> 16 </div> 17 <div class="se"> 18 <h3><a href="">探索</a></h3> 19 <div><img src="../img/探索.png" alt=""></div> 20 </div> 21 </body> 22 </html>
扫一扫
917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
