js二级菜单的制作(有动画)
2015-09-09 09:59
507 查看
<!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-style: normal;} body { text-align: center; font-size: 12px; } #content { margin: 0 auto; width: 600px; } #content #nav { height: 32px; margin-top: 60px; background-color: #464749; } #content #nav ul { list-style: none; } #content #nav ul li { float: left; width: 100px; line-height: 32px; position: relative; } #nav div { width: 100px; position: absolute; left: 0px; padding-bottom: 0px; float: left; height: 0; overflow: hidden; background-color: #23abf1; } #content #nav li .a { text-decoration: none; color: #FFFFFF; line-height: 32px; display: block; border-right-width: 1px; border-right-style: solid; border-right-color: #393A3C; } #nav div a { text-decoration: none; color: #FFFFFF; line-height: 26px; display: block; } #nav div a:hover { background-color: #0C7DBA; } </style> </head> <body> <div id="content"> <div id="nav"> <ul id="supnav"> <li><a href="#" class="a">导航栏1</a> <div> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> </div> </li> <li><a href="#" class="a">导航栏2</a> <div> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> </div> </li> <li><a href="#" class="a">导航栏3</a> <div> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> </div> </li> <li><a href="#" class="a">导航栏4</a> <div> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> </div> </li> <li><a href="#" class="a">导航栏5</a> <div> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> </div> </li> <li><a href="#" class="a">导航栏6</a> <div> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="#">菜单栏</a> <a href="javascript:void(0)">菜单栏</a> </div> </li> </ul> </div> </div> <script type="text/javascript"> var supnav = document.getElementById("supnav"); var nav = document.getElementById("nav"); var btns = document.getElementsByTagName("li"); var subnavs = nav.getElementsByTagName("div"); var paddingbottom = 20; var defaultHeight = 0; function drop(obj, ivalue) { var a = obj.offsetHeight; var speed = (ivalue - obj.offsetHeight) / 10; a += Math.floor(speed); obj.style.height = a + "px"; } window.onload = function() { for (var i = 0; i < btns.length; i++) { btns[i].index = i; btns[i].onmouseover = function() { var osubnav = subnavs[this.index]; var sublinks = osubnav.getElementsByTagName("a"); if (osubnav.firstChild.tagName == undefined) { var itarheight = parseInt(osubnav.childNodes[1].offsetHeight) * sublinks.length + paddingbottom; } else { var itarheight = parseInt(osubnav.firstChild.offsetHeight) * sublinks.length + paddingbottom; } clearInterval(this.itimer); this.itimer = setInterval(function() { drop(osubnav, itarheight); }, 30); } btns[i].onmouseout = function() { var osubnav = subnavs[this.index]; clearInterval(this.itimer); this.itimer = setInterval(function() { drop(osubnav, defaultHeight); }, 30); } } } </script> </body> </html>
相关文章推荐
- Ember.js 入门指南——绑定(bingding)
- Ember.js 入门指南——绑定(bingding)
- js正则表达式基本语法(精粹)
- js小案例
- js正则表达式验证大全(收集)
- js中将 整数转成字符,,将unicode 编码后的字符还原出来的方法。
- 【JavaScript】操作Canvas画图
- js解决onkeydown长按按键卡顿一下
- Javascript作用域和变量提升
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用详解
- ob_end_clean()会干扰jsalert的弹出
- CommonJS,AMD,CMD
- js获取浏览器滚动条距离顶端的距离
- 用Javascript获取页面元素的位置
- 20150908 javascript实现来回滚动的小球
- 纯javascript代码实现计算器功能(三种方法)
- js实现全国省份城市级联下拉菜单效果代码
- 原生JS实现美图瀑布流布局赏析
- js实现可折叠展开的手风琴菜单效果
- js调用百度地图及调用百度地图的搜索功能