Html+CSS+JS实现侧边下拉导航栏（web前端开发基础）

最新推荐文章于 2024-02-04 22:53:14 发布

一一一一一一一一一

最新推荐文章于 2024-02-04 22:53:14 发布

阅读量2.6w

点赞数 44

分类专栏：误人子弟

本文链接：https://blog.csdn.net/weixin_40841866/article/details/83190374

版权

误人子弟专栏收录该内容

3 篇文章 3 订阅

订阅专栏

该代码源自我昨天在B站看的一个视频课（av27073032），造福群众，不喜勿喷。

HTML源代码（建议用Chrome浏览器打开，兼容性强，不易出现乱码现象）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>侧边下拉导航栏</title>
</head>
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    html,body{
        height: 100%;
    }
    .wrap{
        width: 260px;
        height: 100%;
        background-color: #363a45;
    }
    .header{
        width: 100%;
        height: 65px;
        background-color: #44495a;
        font-size: 24px;
        color: #fff;
        text-align: center;
        line-height: 65px;
    }
    .nav{
        width:250px;
        margin: 10px 5px 0;
    }
    .list{
        margin-bottom: 5px;
    }
    .list h2{
        position: relative;
        padding: 15px 0;
        background-color: #3889d4;
        text-align: center;
        font-size: 16px;
        color: #fff;
        transition: .5s;
    }
    .list h2.on{
        background-color: #393c4a;
    }
    .list i{
        position: absolute;
        right: 10px;
        top: 16px;
        border: 8px solid transparent;
        border-left-color: #fff;/*triangle*/
        transform:rotate(0deg);
        transform-origin: 1px 8px;
        transition: .5s;
    }
    .list i.on{
        transform:rotate(90deg);
    }
    .hide{
        overflow: hidden;
        height: 0;
        transition: .5s;
    }
    .hide h5{
        padding: 10px 0;
        background-color: #282c3a;
        text-align: center;
        color:#fff;
        border-bottom:#42495d;
    }
</style>
<body>
    <div class="wrap">
        <div class="header">国内各个景点</div>
        <div class="nav">
            <ul>
                <li class="list">
                    <h2><i></i>北京景点</h2>
                    <div class="hide">
                        <h5>故宫</h5>
                        <h5>圆明园</h5>
                        <h5>天坛</h5>
                        <h5>长城</h5>
                        <h5>天安门</h5>
                        <h5>雍和宫</h5>
                    </div>
                </li>
                <li class="list">
                    <h2><i></i>南京景点</h2>
                    <div class="hide">
                        <h5>夫子庙</h5>
                        <h5>南京总统府</h5>
                        <h5>明孝陵</h5>
                        <h5>长江大桥</h5>
                        <h5>南京博物院</h5>
                        <h5>雨花台</h5>
                    </div>
                </li>
                <li class="list">
                    <h2><i></i>西安景点</h2>
                    <div class="hide">
                        <h5>钟楼</h5>
                        <h5>秦皇陵</h5>
                        <h5>华清池</h5>
                        <h5>大唐芙蓉园</h5>
                        <h5>秦岭野生动物园</h5>
                        <h5>樱花广场</h5>
                    </div>
                </li>
                <li class="list">
                    <h2><i></i>重庆景点</h2>
                    <div class="hide">
                        <h5>洪崖洞</h5>
                        <h5>丰都鬼城</h5>
                        <h5>金刀峡</h5>
                        <h5>重庆仙女山</h5>
                        <h5>白公馆</h5>
                        <h5>三峡博物馆</h5>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script>
        (function () {
            var oList = document.querySelectorAll('.list h2'),
                oHide = document.querySelectorAll('.hide'),
                oIcon = document.querySelectorAll('.list i'),
                lastIndex = 0;
            for(var i=0;i<oList.length;i++){
                oList[i].index = i;//自定义属性
                oList[i].isClick = false;
                oList[i].initHeight = oHide[i].clientHeight;
                oHide[i].style.height = '0';
                oList[i].onclick = function () {
                    if(this.isClick){
                        oHide[this.index].style.height = '0';
                        oIcon[this.index].className = '';
                        oList[this.index].className = '';
                        oList[this.index].isClick = false;
                    }
                    else{
                        oHide[lastIndex].style.height = '0';
                        oIcon[lastIndex].className = '';
                        oList[lastIndex].className = '';
                        oHide[this.index].style.height = '220px';
                        oIcon[this.index].className = 'on';
                        oList[this.index].className = 'on';
                        oList[lastIndex].isClick = false;
                        oList[this.index].isClick = true;
                        lastIndex = this.index;
                    }
                }
            }
        })();
    </script>
</body>
</html>

一一一一一一一一一

关注

44
点赞
踩
262

收藏

觉得还不错? 一键收藏
10
评论
Html+CSS+JS实现侧边下拉导航栏（web前端开发基础）

该代码源自我昨天在B站看的一个视频课（av27073032），造福群众，不喜勿喷。HTML源代码（建议用Chrome浏览器打开，兼容性强，不易出现乱码现象）：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&quot
复制链接

扫一扫