html+css+js制作的导航栏

最新推荐文章于 2022-08-12 14:44:37 发布

风雨等归期

最新推荐文章于 2022-08-12 14:44:37 发布

阅读量947

点赞数

分类专栏： js基础文章标签： js

本文链接：https://blog.csdn.net/liangmaxmin/article/details/106988604

版权

js基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

刚学完js ，练练手写下这个导航栏
在这里插入图片描述

<style>
    ul {
        padding: 0;
        list-style: none;
        font-size: 12px;
        color: #000;
        overflow: hidden;
    }

    .navs {
        width: 200px;
        height: 600px;
        background: #CCFF99;
        margin: 50px 0 0 50%;
        transform: translateX(-50%);

    }

    .navs > li {
        padding: 10px 20px;
        border-bottom: 1px dotted #ccc;
        text-align: center;
        cursor: pointer;
    }

    .nav {
        display: none;
        border-radius: 10px;

    }

    .nav > li {
        padding: 10px 0;
        text-align: center;
        background:#FFFF66;
        cursor: pointer;
    }

</style>

<body>

<ul class="navs">
    <li>班级
        <ul class="nav">
            <li>大数据一班</li>
            <li>大数据二班</li>
        </ul>
    </li>
    <li>专业
        <ul class="nav">
            <li>java</li>
            <li>大数据</li>
            <li>net</li>
        </ul>
    </li>
    <li>教室
        <ul class="nav">
            <li>14教</li>
            <li>15教</li>
        </ul>
    </li>
</ul>

</body>

<script>

    var navs = document.querySelector('.navs');
    var nav = document.querySelectorAll('.nav');
    var index = 0;

    var lis = navs.children;
    for (var i = 0; i < lis.length; i++) {
        (function (i) {
            lis[i].onclick = function () {
//                每点击一次就重置marginTop 样式
                lis[index].style.marginTop=0;
                for (var j = 0; j < lis.length; j++) {
                    nav[j].style.display = 'none';
                }
                nav[i].style.marginTop = '10px';
                nav[i].style.display = 'block';
                if (i!=lis.length-1){

                    index = i+1;
//                    获取当前被点击li的真实高度
                    var height = 600 - parseInt(this.offsetHeight)-(lis.length-1)*42;
                    lis[index].style.marginTop=height+'px';
                }

            }
        })(i);

    }

</script>

风雨等归期

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html+css+js制作的导航栏

刚学完js ，练练手写下这个导航栏<style> ul { padding: 0; list-style: none; font-size: 12px; color: #000; overflow: hidden; } .navs { width: 200px; height: 600px; background: #CCFF99;
复制链接

扫一扫