HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航</title>
<link rel="stylesheet" href="./css/index01.css">
</head>
<body>
<img src="第一版完成.jpg">
<div class="page">
<div class="header">
<div class="logoClass" style="width: 50px">
<img class="logo" src="logo.png" style="max-width: 400%">
</div>
<div class="header-box">
<div class="nav-box" onclick="openNav()" id="navBox" style="color: #d0d0d0">≡</div>
</div>
</div>
<div class="nav-content-box" onclick="closeNav()" style="background: #ffffff">
<div id="contentBox" style="margin: 0 auto; width: 1000px; overflow: hidden;height: 0; transition: height 2s;"><img class="nav-logo" src="logo.png" style="max-width: 30%">
<div class="nav-content content" id="navContent">
</div>
<div class="child-nav-01 content" id="childNav01">
</div>
<div class="child-nav-02 content" id="childNav02">
</div>
</div>
</div>
</div>
</body>
<script src="./js/index.js"></script>
</html>
CSS样式:自己根据情况自行修改
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
a {
color: #0087cd;
text-decoration: none;
transition: all 1s;
}
.logo{
margin-left: 260%;
margin-top: 5px;
float: left;
}
.nav-logo{
margin-top: 200px;
float: right;
}
.page {
width: 100%;
height: 40px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
/*background-color: #f7f7f7;*/
}
.header-box {
height: 100px;
line-height: 100px;
width: 1200px;
margin: 0 auto;
}
.nav-box {
font-size: 60px;
cursor: pointer;
transition: all 1s;
}
.nav-content-box {
margin-top: 0;
position: fixed;
top: 100px;
/* position: fixed;
top: 0;
left: 0; */
width: 100%;
}
.content {
float: left;
width: 180px;
}
.content ul {
width: 100%;
}
ul li {
height: 55px;
width: 100%;
line-height: 55px;
}
li:hover{
display: block;
width: 100%;
height: 100%;
padding-left: 10px;
background-color: #0087cd;
}
li:hover a {
color: #ffffff;
}
.children:hover:after {
content: '>';
color: #ffffff
}
.children {
position: relative;
}
.children::after {
position: absolute;
content: '∨';
color: #0087cd;
right: 10px;
}
JS抠脚的JS,做了一些删减,自行运行检验,children下自行根据需求添加,可以继续往下编辑
const navContent = document.querySelector("#navContent")
let navFlag = true
const navList = [
{
id: 1,
text: '首页',
path: 'index02.html',
children: []
},
{
id: 2,
text: '首页',
path: '',
children: [
{
id: 11,
text: '简介',
path: 'index.html',
children: []
},{
id: 12,
text: '团队',
path: 'index 01.html',
children: []
},{
id: 13,
text: '组织',
path: '',
children: []
},{
id: 14,
text: '文化',
path: '',
children: []
},{
id: 15,
text: '历程',
path: '',
children: []
},
]
},
{
id: 3,
text: 'XX中心',
path: '/quality',
children: [
{
id: 11,
text: '标题1',
path: '',
children: []
},{
id: 11,
text: '标题1',
path: '',
children: []
},{
id: 11,
text: '标题1',
path: '',
children: []
},
]
},
{
id: 4,
text: '标题',
path: '',
children: [
{
id: 11,
text: '标题1',
path: '',
children: []
},
]
},{
id: 9,
text: '标题1',
path: 'product.html',
children: [
{
id: 14,
text: '标题1',
path: '',
children: [
]
},
]
},
]
let currentNav = [0,0,0]
window.onload = function(){
document.querySelector('#childNav01').innerHTML = ''
showNav(navList, navContent, 'activeNav', 0)
}
/*function openNav() {
navFlag = !navFlag
const navBox = document.querySelector('#navBox')
const contentBox = document.querySelector('#contentBox')
navBox.innerHTML = navFlag ? '≡' : '×'
if(navFlag) {
contentBox.style.height = 0
}else{
contentBox.style.height = 'auto';
document.querySelector('.header-box').style.backgroundColor='#f7f7f7'
}
}
function closeNav(){
const contentBox = document.querySelector('#contentBox')
navFlag = true
navBox.innerHTML = navFlag ? '≡' : '×'
if(navFlag) {
contentBox.style.height = 0
}else{
contentBox.style.height = 'auto'
}
}
*/
function openNav() {
navFlag = !navFlag
const navBox = document.querySelector('#navBox')
const contentBox = document.querySelector('#contentBox')
navBox.innerHTML = navFlag ? '≡' : '×'
if(navFlag) {
contentBox.style.height = 0
document.querySelector('.header').style.backgroundColor=''
}else{
document.querySelector('.header').style.backgroundColor='#f7f7f7'
contentBox.style.height = 'auto'
}
}
function closeNav(){
const contentBox = document.querySelector('#contentBox')
navFlag = true
navBox.innerHTML = navFlag ? '≡' : '×'
if(navFlag) {
contentBox.style.height = 0
document.querySelector('.header').style.backgroundColor=''
}else{
contentBox.style.height = 'auto'
document.querySelector('.header').style.backgroundColor='#f7f7f7'
}
}
//渲染导航内容
function showNav(data, ele, fun, type){
let s = '<ul>'
for(let i = 0; i < data.length; i++) {
if(data[i].children.length > 0) {
s += `<li class="children" onmouseover='` + fun +`(` + i + `)'><a href="` + data[i].path + `">` + data[i].text + `</a></li>`
}else {
s += `<li onmouseover='` + fun +`(` + i + `)'><a href="` + data[i].path + `">` + data[i].text + `</a></li>`
}
}
s += '</ul>'
ele.innerHTML = s
}
let i1 = 0
let i2 = 0
let i3 = 0
function activeNav(i) {
i1 = i
document.querySelector('#childNav01').innerHTML = ''
document.querySelector('#childNav02').innerHTML = ''
if(i) {
let children = navList[i].children
showNav(children, document.querySelector('#childNav01'), 'activeNav1', 1)
}
}
function activeNav1(i) {
// i2 = i
let children = navList[i1].children[i].children
if(i) {
let nav2 = document.querySelector('#childNav02')
showNav(children, nav2, 'activeNav2')
}
}
function activeNav2() {
}
没了,就这些,简单的代码,希望对大家有帮助!