目标：利用html+css实现鼠标移到菜单栏时，菜单栏会缓慢出现的结果 我们可以用两种方法来解决这个标题 方法一：过渡（transition）对forum-1开启[code]绝对定位[/code](absolute)，让内里的[code]li[/code]从其父元素中离开出去，不然会把之后的内容往右挤，而且设置[code]overflow：hidden[/code], 设置高度为0， 鼠标移入后再设置相应的高度即可 [code] .code .forum-1{ /* 开启绝对定位 */ position: absolute; overflow: hidden; height: 0; transition-duration: 0.5s; } [/code]html 代码如下： [code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/reset.css"> <title>菜单栏缓慢下拉</title> </head> <body> <ul class="code"> <li><a href="#">博客</a></li> <li class="forum"><a href="#">论坛</a> <ul class="forum-1"> <li><a href="#">css</a></li> <li class="vue"><a href="#">vue</a></li> <li><a href="#">python</a></li> </ul> </li> <li><a href="#">直播</a></li> </ul> </body> </html> [/code]css 样式代码如下： [code] a{ display: block; text-decoration: none; color: #333; } .code{ width: 390px; height: 50px; line-height: 50px; background-color:#bfa; margin: 5px auto; } .code li{ float: left; width: 130px; height: 50px; background-color: #bfa; text-align: center; margin: 0 auto; font-size: 20px; } .code > li:last-child{ margin-right: 0; } .code > li:hover{ background-color: #f8f192; } .forum{ position: relative; margin: auto 90px; } .code .forum-1{ /* 开启绝对定位 */ position: absolute; overflow: hidden; height: 0; transition-duration: 0.5s; } .forum:hover .forum-1{ /* 鼠标移入开释高度 */ height: 150px; } [/code] [code]试了许多次发现，transition是不支持display属性的，也就是说，不能用display：none隐藏菜单栏[/code]方法二：动画（animation）首先创建css动画： [code] @keyframes frames{ from{ height: 0px; } to{ height: 150px; } } [/code]然后设置display：none隐藏菜单样式，把它绑定到forum-1选择器中，用animation绑定动画名字，设置一连时间 [code] .forum-1{ position: absolute; display: none; overflow: hidden; /* 绑定动画名字而且设置一连时间 */ animation-name: frames; animation-duration: 0.5s; } [/code]当鼠标移入时，设置display属性为block即可 [code] .forum:hover .forum-1{ display: block; } [/code]需要留意的一点是，如许写的结果会出现一个标题：当鼠标移入不久后二级菜单栏会主动收回，为了克制这种标题，我们可以在forum-1选择器内部添加一行代码即可： [code] .forum-1{ animation-fill-mode: forwards; } [/code] [code]其余代码和方法一的代码雷同，这里不再赘述[/code]结果图如下：
到此这篇关于利用html+css实现菜单栏缓慢下拉结果的示例代码的文章就先容到这了,更多相关html+css菜单栏缓慢下拉内容请搜刮脚本之家以前的文章或继续浏览下面的相关文章，盼望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/768477.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 08:30 , Processed in 0.036064 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
