掌阅漫画导航栏(可滑动,可下拉)

最新推荐文章于 2021-05-17 08:49:05 发布

神影天初

最新推荐文章于 2021-05-17 08:49:05 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签： html css js

本文链接：https://blog.csdn.net/qq_35134066/article/details/82785846

版权

JavaScript 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

案例网址:https://m.cm233.com/category

仿写该网址的滚动下拉菜单,建议尝试浏览器的手机模式观看.

下面的图片在代码中会用到,可以到http://m.cm233.com/static/img/index_sprite.png?v=a9fedc5)下载保存好路径.

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }

        html,
        body {
            width: 100%;
        }

        section {
            width: 100%;
            position: fixed;
            top: 0;
            background: white;
            z-index: 100;
            line-height: 25px;
            font-size: 13px;
            color: #999;
        }

        .nav {
            position: relative;
            width: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
        }

        .content {
            width: 860px;
            height: 45px;
            transition: height .3s ease-in-out;
            border-bottom: 2px solid #f6f1f1;
        }

        .content div {
            display: inline-block;
        }

        .item {
            display: inline-block;
            padding: 10px 0;
            margin: 0 15px;
            border-bottom: 2px solid transparent;
        }

        .active {
            font-size: 14px;
            color: #fd5c63;
            border-bottom: 2px solid #fd5c63;
            font-weight: 700;
        }

        .rotate {
            transform: rotate(180deg);
        }

        .control {
            position: absolute;
            bottom: 0;
            right: 0;
            height: 30px;
            width: 38px;
            background: rgba(255, 255, 255, .9);
        }

        i {
            margin: 5px 0 0 9px;
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(imgs/index_sprite.png) no-repeat;
            background-size: 200px 300px;
        }

        .div {
            height: 800px;
            position: absolute;
            top: 50px;
        }

        .div div {
            display: none;
        }

        .div div:nth-child(1) {
            display: block;
        }

        @media (max-width:375px) {
            .col {
                width: 100%;
                height: 136px;
            }
        }

        @media (min-width:375px) {
            .col {
                width: 400px;
                height: 136px;
            }
        }

        @media (min-width:425px) {
            .col {
                width: 400px;
                height: 136px;
            }
        }

        @media (min-width:768px) {
            .col {
                width: 100%;
                height: 90px;
            }
        }

        @media (min-width:1024px) {
            .col {
                width: 100%;
                height: 45px;
            }
        }
    </style>
</head>

<body>
    <section>
        <div class="nav">
            <div class="content">
                <div><span class="item active" data-index="0">新书</span></div>
                <div><span class="item" data-index="1">完结</span></div>
                <div><span class="item" data-index="2">少女</span></div>
                <div><span class="item" data-index="3">古风</span></div>
                <div><span class="item" data-index="4">少年</span></div>
                <div><span class="item" data-index="5">校园</span></div>
                <div><span class="item" data-index="6">悬疑</span></div>
                <div><span class="item" data-index="7">都市</span></div>
                <div><span class="item" data-index="8">玄幻</span></div>
                <div><span class="item" data-index="9">彩虹</span></div>
                <div><span class="item" data-index="10">搞笑</span></div>
                <div><span class="item" data-index="11">治愈</span></div>
                <div><span class="item" data-index="12">剧情</span></div>
                <div><span class="item" data-index="13">免费</span></div>
            </div>
        </div>
        <div class="control"><i></i></div>
    </section>
    <div class="div">
        <div>新书</div>
        <div>完结</div>
        <div>少女</div>
        <div>古风</div>
        <div>少年</div>
        <div>校园</div>
        <div>悬疑</div>
        <div>都市</div>
        <div>玄幻</div>
        <div>彩虹</div>
        <div>搞笑</div>
        <div>治愈</div>
        <div>剧情</div>
        <div>免费</div>
    </div>
    <script src="./jquery-3.3.1.js"></script>
    <script>
        $("i").on("click", function () {
            $(".content").toggleClass("col");
            $(this).toggleClass("rotate");
        });
        $('.item').on("click", function () {
            console.log($(this).attr("data-index"));
            $(".div div").hide();
            $(".div div").eq($(this).attr("data-index")).show();
            $(".item").removeClass("active");
            $(this).addClass("active");
        });
    </script>
</body>

</html>

神影天初

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
掌阅漫画导航栏(可滑动,可下拉)

案例网址:https://m.cm233.com/category仿写该网址的滚动下拉菜单,建议尝试浏览器的手机模式观看.下面的图片在代码中会用到,可以到http://m.cm233.com/static/img/index_sprite.png?v=a9fedc5)下载保存好路径.代码:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;...
复制链接

扫一扫

专栏目录