自适应导航栏

最新推荐文章于 2023-12-18 23:41:14 发布

闹闹没有闹

最新推荐文章于 2023-12-18 23:41:14 发布

阅读量203

点赞数

分类专栏： html JavaScript

本文链接：https://blog.csdn.net/qq_41893686/article/details/115834687

版权

JavaScript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2443051_erm4fc6b5a.css">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .box {
            width: 100px;
            height: 100px;
            overflow: hidden;
            overflow-x: auto;
            display: flex;
        }

        .box ul {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-around;

        }

        .box li {
            /* display: flex; */
            /* width: 100px; */
            height: 20px;
            line-height: 20px;
            margin-left: 12px;
            /* margin: 0 9px; */
            background-color: royalblue;
        }

        header {
            width: 100%;
            background-color: red;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .logo_icon {
            display: none;
        }

        .menu ul {
            display: flex;
            /* flex-direction:column */
        }

        .menu ul li {
            margin: 0 10px;
        }

        .logo {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        @media screen and (max-width:1366px) {
            header {
                background-color: yellowgreen;
            }

            header {
                flex-direction: column;
            }

            .logo {
                display: flex;
                width: 100%;
                align-items: flex-start
            }

            .menu {
                width: 100%;
                text-align: left;
                transition: all .5s;
            }

            .menu ul {
                display: flex;
                flex-direction: column;
            }

            .menu ul li {
                margin: 0;
            }

            .logo_icon {
                display: block;
            }

            input[type='checkbox'] {
                cursor: pointer;
                position: relative;
                width: 13px;
                height: 13px;
                font-size: 13px;
                margin-right: 5px;
                background-color: red;
                display: none;
            }

            .choose_img {
                font-size: 25px;
            }

        }
    </style>
</head>

<body>
    <header>
        <div class="logo">
            <div class="logo_img">logo</div>
            <div class="logo_icon">
                <label for="choose">
                    <i class="choose_img iconfont icon-zhankai"></i>
                    <input type="checkbox" id="choose">
                </label>
            </div>
        </div>
        <div class="menu">

            <ul>
                <li>我们</li>
                <li>中心</li>
                <li>退出</li>
            </ul>
        </div>

    </header>
    <script>
        window.onload = function () {
            let choose = document.getElementById("choose")
            let choose_img = document.getElementsByClassName("choose_img")[0]
            let menu = document.querySelector(".menu")
            choose.addEventListener('change', function () {
                menu.style.display = choose.checked ? 'none' : 'block'
                choose_img.className = choose.checked ? 'choose_img iconfont icon-shouqi' :
                    'choose_img iconfont icon-zhankai';
            })
        }
    </script>
</body>

</html>

也可以直接通过css样式，checkbox是否选中来控制显示和隐藏，

闹闹没有闹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自适应导航栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="s
复制链接

扫一扫