js实现二级导航
贴下效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 导航栏 -->
<style>
.page{
width: 960px;
height: 460px;
margin: 20px auto;
position: relative;
}
.bg{
width: 240px;
height: 460px;
background: rgba(7, 17, 27, 0.4);
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
.main{
width: 240px;
height: 460px;
position:absolute;
top: 0;
left: 0;
}
a{
text-decoration: none;
}
.nav{
width: 240px;
height: 80px;
margin-top: 20px;
line-height: 80px;
}
.nav span{
margin-left: 32px;
color: white;
font-size: 19px;
}
.line{
width:190px;
border-bottom: 1px solid rgba(7,17,27,0.3);
margin: 0 auto;
}
.sub{
width: 720px;
height: 460px;
position: absolute;
left: 240px;
top: 0;
display: none;
}
.sub-menu{
width: 720px;
height: 460px;
/* margin-top: -20px; */
/* display: none; */
background-color: red;
overflow: hidden;
}
.inner-box{
/* margin-top: -20px;*/
overflow: hidden;
width: 720px;
height: 460px;
background-color: black;
background-image: url('img/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size:100% 100%;
/* background-attachment: fixed; */
}
.row{
margin: 20px 10px 10px 30px;
}
.row a{
color: rgba(7, 17, 27, 0.6);
font-size: 18px;
}
</style>
</head>
<body>
<div class="page" id="page">
<!-- 菜单背景色 -->
<div class="bg"></div>
<!-- 子菜单 -->
<div class="sub" id='sub'>
<div class="sub-menu" id='subMenu'>
<div class="inner-box">
<div class="row">
<a href="" title="">aaaa</a>
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">aaaa</a>
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">aaaa</a>
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">aaaa</a>
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">aaaa</a>
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">dddd</a>
</div>
</div>
<div class="inner-box">
<div class="row">
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">eeee</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">eeee</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">eeee</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">eeee</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">eeee</a>
<a href="" title="">dddd</a>
</div>
</div>
<div class="inner-box">
<div class="row">
<a href="" title="">cccc</a>
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">cccc</a>
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">cccc</a>
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">cccc</a>
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">dddd</a>
</div>
<div class="row">
<a href="" title="">aaaa</a>
<a href="" title="">bbbb</a>
<a href="" title="">cccc</a>
<a href="" title="">dddd</a>
</div>
</div>
</div>
</div>
<!-- 主菜单 -->
<div class="main" id='main'>
<div class="nav">
<a href="" title=""><span>第一个选项栏</span></a>
</div>
<div class="line"></div>
<div class="nav">
<a href="" title=""><span>第二个选项栏</span></a>
</div>
<div class="line"></div>
<div class="nav">
<a href="" title=""><span>第三个选项栏</span></a>
</div>
<div class="line"></div>
</div>
</div>
<script>
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
console.log(byId('page'));
var index=null;
var sub=byId('sub');
var subMenu=byId('subMenu');
console.log(subMenu);
var innerBox=subMenu.getElementsByClassName("inner-box");
console.log(innerBox);
var main=byId("main");
console.log(main);
var nav=main.getElementsByClassName("nav");
console.log(innerBox.length);
console.log(nav.length+"@");
function show(){
for(var i=0;i<nav.length;i++)
{
nav[i].id=i;
console.log(nav[i].id);
/*innerBox[i].style.display='none';
sub.style.display = 'none';
subMenu.style.display='none';*/
nav[i].function(){
index=this.id;
console.log(index);
for(var m=0;m<nav.length;m++)
{
innerBox[m].style.display='none';
sub.style.display = 'none';
subMenu.style.display='none';
}
innerBox[index].style.display = 'block';
sub.style.display='block';
subMenu.style.display = 'block';
}
}
main.function(){
sub.style.display = 'none';
subMenu.style.display = 'none';
}
sub.function(){
sub.style.display = 'block';
subMenu.style.display = 'block';
}
sub.function(){
sub.style.display = 'none';
}
}
show();
</script>
</body>
</html>