仿京东左侧二级导航条
IE6到10,firefox,Chrome没有问题,主要是CSS代码,还有IE6、7JS的兼容问题,最后发现用setTimeout延时显示二级菜单不行,二级菜单会自动隐藏,求高手解答~
HTML代码:
<div id="menu"> <div id="top"><span><a href="#">全部商品分类</a></span></div> <ul id="nav"> <li><a href="#" class="navlia"><span>家用电器</span></a><div><ul><li><b><span><a href="#">大家电</a></span></b><span><a href="#">洗衣剂</a></span><span><a href="#">洗衣剂</a></span><span><a href="#">洗衣剂</a></span><span><a href="#">洗衣剂</a></span></li><li><b><span><a href="#">中家电</a></span></b><span><a href="#">空调</a></span><span><a href="#">洗衣剂</a></span></li><li><b><span><a href="#">小家电</a></span></b><span><a href="#">空调</a></span><span><a href="#">洗衣剂</a></span></li></ul><ul class="navulright"><li><b><span><a href="#">促销活动</a></span></b><span class="closespan"></span></li><li><b><span><a href="#">推荐品牌</a></span></b></li></ul></div> </li> <li><a href="#" class="navlia"><span>手机数码</span></a><div><ul><li><b><span><a href="#">大手机</a></span></b><span><a href="#">手机</a></span><span><a href="#">手机</a></span><span><a href="#">洗衣剂</a></span><span><a href="#">洗衣剂</a></span></li><li><b><span><a href="#">中手机</a></span></b><span><a href="#">手机数码</a></span><span><a href="#">手机数码</a></span></li><li><b><span><a href="#">小手机</a></span></b><span><a href="#">空调</a></span><span><a href="#">手机数码</a></span></li></ul><ul class="navulright"><li><b><span><a href="#">促销活动</a></span></b><span class="closespan"></span></li><li><b><span><a href="#">推荐品牌</a></span></b></li></ul></div> </li> <li><a href="#" class="navlia"><span>电脑办公</span></a><div><ul><li><b><span><a href="#">大电脑</a></span></b><span><a href="#">电脑办公</a></span><span><a href="#">洗衣剂</a></span><span><a href="#">洗衣剂</a></span><span><a href="#">洗衣剂</a></span></li><li><b><span><a href="#">中电脑</a></span></b><span><a href="#">空调</a></span><span><a href="#">电脑办公</a></span></li><li><b><span><a href="#">小电脑</a></span></b><span><a href="#">空调</a></span><span><a href="#">洗衣剂</a></span></li></ul><ul class="navulright"><li><b><span><a href="#">促销活动</a></span></b><span class="closespan"></span></li><li><b><span><a href="#">推荐品牌</a></span></b></li></ul></div> </li> <li><a href="#" class="navlia"><span>家居家装</span></a><div><ul><li><b><span><a href="#">大家居</a></span></b><span><a href="#">家居家装</a></span><span><a href="#">洗衣剂</a></span><span><a href="#">洗衣剂</a></span><span><a href="#">洗衣剂</a></span></li><li><b><span><a href="#">中家家居</a></span></b><span><a href="#">家居家装</a></span><span><a href="#">洗衣剂</a></span></li><li><b><span><a href="#">小家家居</a></span></b><span><a href="#">空调</a></span><span><a href="#">家居家装</a></span></li></ul><ul class="navulright"><li><b><span><a href="#">促销活动</a></span></b><span class="closespan"></span></li><li><b><span><a href="#">推荐品牌</a></span></b></li></ul></div> </li> <li id="foot"><a href="#">全部商品分类</a></li> </ul> </div>
JS代码:
var navli = document.getElementById("nav").children;//获取一级菜单 var con = document.getElementById("nav").getElementsByTagName("div"); //获取二级菜单 //var close=document.getElementsByClassName("closespan"); //IE9之前不支持这个 var timer;//延时显示二级菜单,不会有滑动感。//关闭按钮做的兼容 var id; document.getElementsByClassName = function (className, parentElement) {var children = (parentElement || document.body).getElementsByTagName('*');var elements = [], child;for (var i = 0; i < children.length; i++) {var child = children[i];var classNames = child.className.split(' ');for (var j = 0; j < classNames.length; j++) {if (classNames[j] == className) {elements.push(child); //符合条件的元素加入到数组中break;}}}return elements; }; var close = document.getElementById("nav"); var span=document.getElementsByClassName("closespan", close);//遍历一级菜单数组 for (var i = 0; i < navli.length-1; i++) {navli[i].index = i;//赋值编号span[i].index = i;navli[i].onmouseover = function () { //鼠标一级菜单移入事件id = this.index;//加上这个延时显示二级菜单就不行了,求解答。//timer=setTimeout("con[id].style.display = 'block';navli[id].className = 'navlihover';", 300) con[id].style.display = "block"; //显示二级菜单navli[id].className = "navlihover"; //改变一级菜单边框 }navli[i].onmouseout = function () { //移出事件clearTimeout(timer);//清除延时con[this.index].style.display = "none"; //隐藏二级菜单navli[this.index].className = ""; //改变一级菜单边框样式 }span[i].onclick = function () { //关闭按钮con[this.index].style.display = "none"; //隐藏二级菜单 } }
CSS代码:
#menu{position:relative;margin:10px 10px 10px 20px;width:200px; } #top {height:40px;padding-left:4px;background:url(../images/topleft.jpg) no-repeat; } #top span{display:block; background-color:#DD0505; } #top a{font-size:12px;font-weight:bold;text-decoration:none;color:#FFF;padding-left:20px;line-height:40px; } #top a:hover{text-decoration:underline; } #nav{position:relative;list-style-type:none;margin:0px;padding:2px 0px;background-color:#FCF4EA;border:2px solid #D00000; } /* 一级菜单 */ #nav li{position:relative;margin:0px;padding:0px;width:180px; } .navlihover a{border-top:1px solid #CC3300;border-bottom:1px solid #CC3300;border-right:1px solid #FFF;border-left:0px;background-color:#FFF;z-index:11; } .navlia{position:relative;border-bottom:1px solid #FFF;border-top:1px solid #FCF4EA;font-size:14px;text-decoration:none;color:#333333;padding:6px 0px 2px 0px;display:block;width:150px;height:20px;z-index:11; } #nav li a:hover{color:#D60404;font-weight:bold;text-decoration:underline; } #nav li span{margin-left:20px; } #nav li p{margin:-26px 0 0 0;float:right; } /* 二级菜单 */ #nav li div {display: none;position:absolute;border:1px solid #CC3300;background-color:#FFF;left:150px; top:-30px; height:200px; width:700px; z-index:10; } #nav li ul{float:left; margin:0px; padding:0px 0px 0px 5px; list-style-type:none; } #nav li ul a{border:0px;height:17px;width:33px; border-bottom:0px solid #CCC; } #nav li ul a:hover{text-decoration:underline; } #nav li ul li{padding:6px 0px; border:0px; width:500px; height:20px; border-bottom:1px dotted #EED6B7; } .navulright {float:left; margin-left:8px !important; width: 180px; height:200px; border-left:1px solid #FBE2C6; background-color:#FCF4EA; } .navulright li {width: 180px !important;height:85px !important;border-bottom:0px !important; } .closespan {display: inline-block !important;width:17px;height:17px;padding:0px !important;margin:0px 5px 0px 80px !important;border:0px !important;cursor:pointer;background-image:url("../images/close.png"); } #nav li ul li span {margin:0px; margin-right:20px; padding-left:5px; border-left:1px solid #CCC; } #nav li ul li span a {color:#333333;font-size:10px;text-decoration:none; } #nav li ul li span a:hover {color:#CC0000;font-size:10px;text-decoration:underline;font-weight:normal; } #nav li ul li b span {border:0px; } #nav li ul li b span a {color: #CC0000;font-size:12px; } #nav li ul li b span a:hover {color: #CC0000;font-size:12px;font-weight:bold; } #foot{position:relative;height:20px;background-color:#FDF1DE;z-index:-1; /*ie6 hack*/ } #foot a{font-size:10px;text-decoration:none;color:#CC0000;padding-left:18px;line-height:20px; } #foot a:hover{text-decoration:underline; }
点击下载测试代码
转载于:https://www.cnblogs.com/lideyang/archive/2012/10/19/2731271.html
仿京东左侧二级导航条相关推荐
- 仿京东左侧分类导航栏实现(Jquery)
文章目录 前言 一.效果图 二.使用步骤 1.源码 jQuery CSS(需要自己导入bootstrap包) HTML 总结 前言 在做仿京东网站左侧分类导航栏的经验总结 一.效果图 二.使用步骤 1 ...
- jQuery仿京东左侧物品导航栏练习
1.HTML 和样式部分 <style type="text/css">html{color:#666;background:#FFF;}body,div,dl,dt, ...
- jQuery仿京东左侧物品导航栏
1.HTML和样式部分 <style type="text/css"> html{color:#666;background:#FFF;}body,div,dl,dt, ...
- 仿Apple官网导航条
仿Apple官网导航条效果在线预览 使用flex布局和媒体查询实现了响应式的Apple的中文官网导航条,仿做的动画,字体不一致 不会CSS动画,未有学习 flex掌握感觉还可以 媒体查询也懂得了一小部 ...
- html如何做左侧导航条,如何使用HTMLCSS制作左侧滑动导航条
初始状态 点击菜单展开 HTML代码 使用HTML&CSS制作左侧滑动导航条 Cloud App Dashborad Shortcuts Overview Events About Servi ...
- Android基础控件——TabLayout的使用、仿爱奇艺导航条
TabLayout的使用.仿爱奇艺导航条 学习,学习,学以致用,让基础控件贴近实战效果 TabLayout是Google新推出的Material Design的控件之一,TabLayout的使用必须结 ...
- 楼梯式导航 html,jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航
jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码.具有一定的参考价值,感兴趣的小伙伴们可以参考一下. CSS样式如下: *{ margin:0; padding:0; ...
- 仿网易新闻顶部菜单html,iOS仿网易新闻滚动导航条效果
本文实例为大家分享了iOS滚动导航条效果展示的具体代码,供大家参考,具体内容如下 实现效果 效果:选择不同的栏目,下面出现不同的视图,栏目条可以滚动:下面的视图也可以滚动,滚动时上面对应的栏目要选中颜 ...
- 微信小程序_点击二级导航条切换页面
gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动: 代码解说: 首先我在js自定义了navState参数用于判断导航的当前状态, 定义了data-index用于js中动态修改导航的当前状态, na ...
最新文章
- python学哪个版本-老男孩python学习用的哪个版本?
- python2.7 + selenium3.4.3浏览器的选择
- 五分钟学会使用 go modules(含在家办公使用技巧)
- 伯克利电子和计算机工程申请入口
- Comet OJ(Contest #8)-C符文能量【dp】
- 主流框架的搭建(VUE,React)
- 【干货】小米用户画像实战.pdf(附下载链接)
- 拓端tecdat|R语言时变向量自回归(TV-VAR)模型分析时间序列和可视化
- 为何不让AI做更正确的抉择?人类要逐渐交出控制权
- SQLyog安装成功步骤(附带码),2021版最新
- Xshell 5下载详细教程
- 【昭阳】开源第2弹 JXT
- 交换机接口及连接技巧
- netstat,ss,nc ,wget,dig
- python监控linux运行程序_python linux监控程序
- Drupal - 制作首页
- python 制作二维码
- Android 进阶之路:ASM 修改字节码,这样学就对了!
- SXOI2018 游记
- imoo c1语言设置在哪里,不再被“辣眼睛”!imoo C1 护眼功能解析
热门文章
- 进行xlsx 复制一行_利用Phyton对Excel数据进行查错
- appium java版本错误_java – 无法创建新会话. appium代码中的错误
- 蹦球传说诺基亚java_bouncetales蹦球传说
- 自然语言处理期末复习(6)话题模型
- 2021年11月软考准考证打印时间及操作步骤
- Winform中实现实时颜色拾取器显示RGB和16进制颜色(附代码下载)
- SpringBoot中使用log4j进行日志管理
- SSM查看详情功能逻辑代码以及关联码表显示
- 【编程2】单链表+单链表反转(LeetCode. 206)
- 冲刺 (sprint) 评审会议