JS实现仿京东淘宝竖排二级导航
代码很简单,就不多废话了,直接奉上代码:
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"> <title></title> <metaname="description"content=""> <metaname="keywords"content=""> <linkhref=""rel="stylesheet"> <scripttype="text/javascript"> functionhoversee(){ varlist=document.getElementById('nav'); varzu=list.getElementsByTagName("li"); for(vari=0;i<9;i++) { zu[i].onmouseover=function(){ this.getElementsByTagName('dl')[0].style.display="block"; } zu[i].onmouseout=function(){ this.getElementsByTagName('dl')[0].style.display="none"; } } } window.onload=hoversee; </script> <style> *{ font-family:MicrosoftYaHei; margin:0; padding:0; } body{width:100%;} ul{list-style:none;} a{text-decoration:none;} #header{ height:50px; line-height:50px; background:#455A6E; } #headerh2,#headerh3{ font-weight:500; } #headerh2{ color:#fff; font-size:18px; width:180px; text-align:center; background:#0D2E49; } #headerh3{color:#fff;font-size:16px;} .mycenter{ width:900px; margin:0auto; } #headerdiv.mycenter{ /*相对定位*/ position:relative; } #nav{ width:180px; background:rgba(0,102,173,0.5); z-index:999; } #navli{ height:40px; padding-left:40px; line-height:40px; position:relative; } #navh3{height:40px;} #navlidl{ position:relative; left:140px; top:-40px; width:150px; background:#fff; display:none; padding:8px10px; } #navdt{ width:150px; line-height:30px; height:30px; background:#36C1AF; color:#fff; text-align:center; } #navdda{ display:block; height:30px; width:150px; font-size:14px; color:#858585; } #navdda:hover{ text-decoration:underline; } #content{ background:#E95200; height:500px; } </style> </head> <body> <divid="header"> <divclass="mycenter"> <h2>后台管理菜单</h2> <ulid="nav"> <li> <h3>帐号管理</h3> <dl> <dt>帐号管理</dt> <dd> <ahref="#">修改密码</a> <ahref="#">修改用户名</a> <ahref="#">设置密保问题</a> </dd> </dl> </li> <li> <h3>首页管理</h3> <dl> <dt>首页管理</dt> <dd> <ahref="#">轮转照片设置</a> <ahref="#">产品展示照片设置</a> <ahref="#">底部信息修改</a> </dd> </dl> </li> <li> <h3>产品管理</h3> <dl> <dt>产品管理</dt> <dd> <ahref="#">增加新产品</a> <ahref="#">管理全部产品</a> <ahref="#">类别管理</a> </dd> </dl> </li> <li> <h3>新闻管理</h3> <dl> <dt>新闻管理</dt> <dd> <ahref="#">发布新闻</a> <ahref="#">全部新闻管理</a> <ahref="#">增加系列</a> <ahref="#">新闻系列管理</a> </dd> </dl> </li> <li> <h3>反馈管理</h3> <dl> <dt>反馈管理</dt> <dd> <ahref="#">管理所有反馈</a> </dd> </dl> </li> <li> <h3>企业信息管理</h3> <dl> <dt>企业信息管理</dt> <dd> <ahref="#">企业简介</a> <ahref="#">企业联系方式设置</a> <ahref="#">人才招聘管理</a> </dd> </dl> </li> <li> <h3>权限管理</h3> <dl> <dt>权限管理</dt> <dd> <ahref="#">添加新管理员</a> <ahref="#">查看所有账号权限</a> <ahref="#">查看申诉</a> </dd> </dl> </li> <li> <h3>功能管理</h3> <dl> <dt>功能管理</dt> <dd> <ahref="#">一级功能设置</a> </dd> </dl> </li> <li> <h3>权限查看与申请</h3> <dl> <dt>权限查看与申请</dt> <dd> <ahref="#">查看自己的权限</a> <ahref="#">申请权限</a> </dd> </dl> </li> </ul> </div> </div> <divid="content"> </div> <divid="footer"> </div> </body> </html>
小伙伴们根据自己的需求,将调用代码加进去就可以了,自由发挥吧。