【前端积累】二级菜单,鼠标滑过的时候子菜单显示,当鼠标离开的时候子菜单隐藏
2016-11-07 15:39
495 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动画菜单</title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 14px; } a { color: #333; text-decoration: none } ul{ list-style: none; } .nav {height: 30px; border-bottom: 5px solid #F60; margin-left:50px; width:600px;} .nav li { float: left; position:relative; height:30px; width:120px } .nav li a { display: block; height: 30px; text-align: center; line-height: 30px; width:120px; background: #efefef; margin-left: 1px; } .subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden} .subNav li a{ background:#ddd } .subNav li a:hover{ background:#efefef} </style> <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover=function(){ //鼠标经过一级菜单,二级菜单动画下拉显示出来 oSubNav=this.getElementsByTagName('ul')[0]; if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight+16+"px"; if(This.offsetHeight>=120) clearInterval(This.time); },30) } } //鼠标离开菜单,二级菜单动画收缩起来。 aLi[i].onmouseout=function(){ if(oSubNav){ var This=oSubNav; clearInterval(This.time); This.time=setInterval(function(){ This.style.height=This.offsetHeight-16+"px"; if(This.offsetHeight<=0) clearInterval(This.time); },30) } } } } </script> </head> <body> <ul class="nav"> <li><a href="#">一级菜单</a> <ul class="subNav"> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li><a href="#">一级菜单</a> <ul class="subNav"> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> <li><a href="#">二级菜单</a></li> </ul> </li> <li><a href="#">一级菜单</a></li> <li><a href="#">一级菜单</a></li> <li><a href="#">一级菜单</a></li> </ul> </body> </html>
相关文章推荐
- 纯CSS实现鼠标滑过显示子菜单的二级菜单效果
- javascript鼠标滑过显示二级菜单特效
- javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果
- 鼠标悬停hover显示子菜单移入二级后子菜单不消失
- 二级的CSS菜单,鼠标移过显示子菜单
- mm_menu.js(实现鼠标移入横向显示二级菜单效果)
- jquery实现鼠标滑过显示二级下拉菜单效果
- 鼠标经过显示二级菜单js特效
- 鼠标停在目录1,目录2,目录3的时候显示菜单
- 鼠标悬浮显示二级菜单
- jquery实现鼠标滑过显示二级下拉菜单效果
- Javascript鼠标悬停显示子菜单的大型分类菜单
- Jquery二级菜单,鼠标经过显示二级分类,大类和小类都有链接
- mm_menu.js(实现鼠标移入横向显示二级菜单效果)(2)
- MFC Ribbon模式下 菜单promt鼠标滑过时候的提示是需要在属性的promt前面加上\n
- 关于圆角的实现以及鼠标移入显示二级菜单的兼容处理!
- 鼠标滑过右侧显示菜单
- Jquery二级菜单,鼠标经过显示二级分类,大类和小类都有链接
- 一个列用render渲染的时候,如果列宽度不够,内容多出的部分会被隐藏,无法显示。这时需要一个鼠标滑过提示全部内容的tip功能。
- query二级菜单,鼠标经过显示二级分类,大类和小类都有链接