简介：纯js制作导航，此导航只需要关系 appendHtml(arrays,bigNavi,0,navigationArr);函数的使用即可。
下面代码粘贴到本地即可使用。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主页</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="icon/iconfont.css">
</head>
<body>
<!-- 主内容 -->
<div class="continer">
<!-- 项目标题 -->
<div class="title">
<span class="iconfont icon-jiantoushang"></span>
</div>
<!-- 项目头部 -->
<div class="top">
</div>
<!-- 左侧导航栏 -->
<div class="left">
<div class="middleman">
<div class="hrefs">
<ul id="bigNavigation">
<!-- 导航 -->
</ul>
</div>
</div>
</div>
<!-- 点击导航栏要显示的 -->
<div class="main">
<iframe src="" name="iframe_a"></iframe>
</div>
</div>
</body>
<script src="icon/iconfont.js"></script>
<script>
window.onload=function(){
let arrays=[
{
name:"一级导航1",
children:[
{
name:"二级导航1",
children:[
{
name:"三级导航",
}
]
},
{
name:"二级导航2",
children:[
{
name:"三级导航"
},
{
name:"三级导航"
},
{
name:"三级导航"
}
]
},
]
},
{
name:"一级导航2",
children:[
{
name:"二级导航1",
children:[
{
name:"三级导航",
}
]
},
{
name:"二级导航2",
children:[
{
name:"三级导航",
children:[
{
name:"四级导航",
children:[
{name:"五级导航"},
{name:"五级导航"},
{name:"五级导航"},
]
},
{
name:"四级导航"
}
]
},
{
name:"三级导航"
},
{
name:"三级导航"
}
]
},
]
}
];
let timer;
let bigNavi=document.getElementById("bigNavigation");
function appendHtml(arr,element,pCssNum,navigationArr){
let cssNum=0;
if(pCssNum) cssNum = pCssNum;
let cssName=navigationArr[cssNum];
cssNum++;
for(let i=0;i<arr.length;i++){
var uli=document.createElement("li");
uli.innerText=arr[i].name;
uli.className=cssName;
if(arr[i].marginLeft){
initCss(uli);
}
element.appendChild(uli);
uli.onclick=function(event){
event.stopPropagation();
if(this.children && this.children.length){
let h=0;
let f=arr[i].flag;
for(let j=0;j<this.children.length;j++){
if(!f){
this.children[j].style.height="50px";
}else{
let cna=childNodeAll(this);
for(let k=0;k<cna.length;k++){
cna[k].style.height="0px";
}
}
if(j == this.children.length-1){
arr[i].flag=!f;
arrFlagFalse(arr[i].children)
}
}
if(this.parentNode.tagName != "UL"){
listener(this);
}
}
}
if(arr[i].children){
arr[i].flag=false;
arr[i].children.forEach(item => {
item.marginLeft=1;
});
appendHtml(arr[i].children,uli,cssNum,navigationArr);
}
}
}
let navigationArr=['navigationOne','navigationTwo','navigationThree','navigationFour','navigationFour'];
appendHtml(arrays,bigNavi,0,navigationArr);
}
function initCss(element){
element.style.overflow="hidden";
element.style.transition="height 0.5s";
element.style.height="0px";
element.style.lineHeight='50px';
}
function childNodeAll(element,nodes){
let nodeAll=[];
if(nodes) nodeAll=nodes;
if(element.children && element.children.length){
for(let i=0;i<element.children.length;i++){
nodeAll.push(element.children[i]);
childNodeAll(element.children[i],nodeAll);
}
}
return nodeAll;
}
function listener(event){
if(!event) return;
if(event.tagName == 'UL' || event.parentNode.tagName == 'UL' ) return
if(event && event.children && event.children.length){
let itself=50;
for(let i=0; i< event.children.length;i++){
itself+=parseInt(event.children[i].style.height);
}
event.style.height=`${itself}px`
}
listener(event.parentNode);
}
function arrFlagFalse(arrChildren) {
if(!arrChildren) return;
for(let i=0;i<arrChildren.length;i++){
arrChildren[i].flag=false;
arrFlagFalse(arrChildren[i].children)
}
}
</script>
</html>
css部分
body{
background-color:#CCFFFF;
margin: 0px;
}
.continer{
font-family: 'KaiTi', Courier, monospace;
font-size: 1rem;
}
.continer div{
position: absolute;
border :1px solid rebeccapurple;
}
.continer .title{
left: 0;
top: 0;
width: 13%;
height: 10%;
}
.continer .top{
left: 13%;
top: 0;
width: 86.86%;
height: 10%;
}
.continer .left{
left: 0;
top: 10%;
width: 12.1%;
height: 86.7%;
padding: .7rem 0 .7rem .7rem ;
overflow: hidden;
}
.continer .left .middleman {
width: 90%;
height:95%;
overflow: auto;
}
.continer .left .middleman::-webkit-scrollbar{
display: none;
}
.continer .left .middleman .hrefs{
width: 90%;
border: 1px solid red;
}
.continer .left .middleman .hrefs ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
.continer .main{
left: 13%;
top: 10%;
width: 86.86%;
height: 89.7%;
}
.continer .main iframe{
width: 99.6%;
height: 99.6%;
}
.navigationOne{
background-color: red;
font-size: 22px;
text-align: left;
line-height: 50px;
}
.navigationTwo{
background-color: rgb(0, 17, 255);
font-size: 19px;
text-align: center;
}
.navigationThree{
background-color: rgb(0, 255, 213);
font-size: 15px;
}
.navigationFour{
background-color: rgb(187, 26, 152);
font-size: 13px;
}
注意：程序中没提供更改高度的方式，可以自行更改。
铭记：时刻保持一个学习的心。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
