HTML+CSS 简单的导航栏隐藏，点击下拉式

最新推荐文章于 2024-07-21 17:58:14 发布

Myosotis♀

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量1k

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_38670328/article/details/131857180

版权

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() {

}

没了，就这些，简单的代码，希望对大家有帮助！

Myosotis♀

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS 简单的导航栏隐藏，点击下拉式

JS抠脚的JS，做了一些删减，自行运行检验，children下自行根据需求添加，可以继续往下编辑。没了，就这些，简单的代码，希望对大家有帮助！CSS样式：自己根据情况自行修改。
复制链接

扫一扫