JS横向延时2级下拉菜单
2015-12-08 17:39
791 查看
CSS样式:
预览效果:
body{ font-size: 12px; color: #333;} body, ul,h2{ margin:0;padding:0;} li { list-style:none;} a{ color: #333; text-decoration: none;} a:hover{ color: #f00;} #nav { width:100%; border:1px solid #000; margin-bottom:10px;} #nav li{ display:inline-block; margin:10px 20px; font-size: 16px; font-weight: bold;} .nav li { float:left; margin: 0 5px; font-size:12px;} .nav { position:absolute; border:1px solid #666; padding: 5px; display:none;} .n1 { left:0;} .n2 { left:80px;} .n3 { left:200px;}HTML部分:
<div class="menu"> <ul id="nav"> <li><a href="#">首页</a></li> <li><a href="#">产品中心</a></li> <li><a href="#">关于我们</a></li> </ul> <ul class="nav n1"> <li><a href="#">首页二级菜单1</a></li> <li><a href="#">首页二级菜单2</a></li> <li><a href="#">首页二级菜单3</a></li> </ul> <ul class="nav n2"> <li><a href="#">产品中心二级菜单1</a></li> <li><a href="#">产品中心二级菜单2</a></li> <li><a href="#">产品中心二级菜单3</a></li> <li><a href="#">产品中心二级菜单4</a></li> </ul> <ul class="nav n3"> <li><a href="#">关于我们二级菜单1</a></li> <li><a href="#">关于我们二级菜单2</a></li> </ul> </div>JS部分:
window.onload = function(){ var oUl = document.getElementById('nav'); var aLi = oUl.getElementsByTagName('li'); //获取一级菜单 var aUl = document.getElementsByTagName('ul'); //获取所有ul var timer = null; var that = ''; // 循环遍历所有的一级菜单 for(var i = 0; i < aLi.length; i++){ // 这里加1的原因是第0个li所对应的ul是第1个ul aLi[i].index = i + 1; // 鼠标经过,先关闭定时器,所有2级菜单隐藏,当前2级菜单显示 aLi[i].onmouseover = function(){ clearTimeout(timer); // 这里设置i = 1也是和上面一样,一一对应 for(var i = 1; i< aUl.length; i++){ aUl[i].style.display = 'none'; } aUl[this.index].style.display = 'block'; }; // 鼠标移开时,先延时200毫秒,然后将2级菜单隐藏 aLi[i].onmouseout = function(){ //将当前索引值保存到that变量中 that = this.index; timer = setTimeout(function(){ aUl[that].style.display = 'none'; },200); }; } // 循环遍历所有的二级菜单【原理同上】 for(var i = 1; i < aUl.length; i++){ // 鼠标经过2级菜单,先清空定时器,当前显示 aUl[i].onmouseover = function(){ clearTimeout(timer); this.style.display = 'block'; }; // 鼠标移开2级菜单,延时200毫秒后再隐藏2级菜单 aUl[i].onmouseout = function(){ that = this; timer = setTimeout(function(){ that.style.display = 'none'; },200); } } };
预览效果:
相关文章推荐
- JavaScript基础——处理字符串
- ExtJS6.0扩展日期选择控件为也可以选择时间
- [Javascript Data Structures] Straight Insertion Sort 直接插入法
- js验证表单 验证空值 长度,过滤非数字等
- (每天一句js)两个array的交集、并集、差集
- JS原型和原型链
- js动态添加行和列
- js
- JS横向延时2级下拉菜单
- html中js通过指定的年月获取该月的天数
- 跨域访问的两种解决方式:jsonp和cors
- 跨域访问的两种解决方式:jsonp和cors
- javascript中对cookie的存取查操作
- html页面中js获取当前url下指定参数的值
- js实现自定义事件(字面量 && 原型)
- JavaScript停止冒泡和阻止浏览器默认行为
- JavaScript学习之窗口
- js效果
- angular表格带筛选分页,本地json
- js浅copy和深copy