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

我就是我 2022-05-11 05:33 175阅读 0赞

案例网址:[https://m.cm233.com/category][https_m.cm233.com_category]

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

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

![70][]

代码:

<!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>

[https_m.cm233.com_category]: https://m.cm233.com/category
[http_m.cm233.com_static_img_index_sprite.png_v_a9fedc5]: http://m.cm233.com/static/img/index_sprite.png?v=a9fedc5%29
[70]: /images/20220511/384ed7ecdd104ff4a9854c643292d98c.png