总结响应式网站的导航栏

最新推荐文章于 2024-07-25 16:56:40 发布

任玉腾

最新推荐文章于 2024-07-25 16:56:40 发布

阅读量1.5k

点赞数

这是我们在PC端浏览的效果

这是我们在手机上浏览的效果

完整代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        ul {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration-style: none;
            color: white;
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        nav {
            text-align: center;
            background: #25383c;
        }

        .nav-list-item a{
            color:white;
            display:block;
            padding:20px 40px;
        }

        .nav-list-item:hover> ul{
            display:block;
        }

        .nav-submenu-list {
            display: none;
        }

        .menu-btn{
            border:none;
            padding:8px 0;
        }

        .clearfix{
            content:'';
            display:block;
            clear:both;
        }

        .btn-icon-close{
            background:url("./images/cross.png") no-repeat center center;
        }

        .btn-icon-menu {
            background: url("./images/icon.png") no-repeat center center;
        }

        .menu-btn-icon{
            border:none;
            width:30px;
            height:30px;
            background-size:cover;
            float:left;
            cursor:pointer;
            margin-left:10px;
        }

        .nav-submenu-list {
            background: gray;
        }

        @media all and (min-width:480px){
            .nav-list-item{
                display:inline-block;
                position:relative;
            }

            .nav-submenu-list{
                display:none;
                position:absolute;
                left:0;
                top:100%;
            }

            .nav-container-list{
                max-width:1280px;
                margin:0 auto;
            }

            .menu-btn{
                display:none;
            }
        }
    </style>
</head>
<body>
    <nav>
        <div class="menu-btn">
            <a href="javascript:void(0)" class="menu-btn-icon btn-icon-close"></a>
            <div class="clearfix"></div>
        </div>
        <ul class="nav-container-list">
            <li class="nav-list-item"><a href="">首页</a></li>
            <li class="nav-list-item"><a href="">关于我</a></li>
            <li class="nav-list-item">
                <a href="">开源项目</a>
                <ul class="nav-submenu-list">
                    <li class="nav-submenu-item"><a href="">subitem1</a></li>
                    <li class="nav-submenu-item"><a href="">subitem1</a></li>
                    <li class="nav-submenu-item"><a href="">subitem1</a></li>
                    <li class="nav-submenu-item"><a href="">subitem1</a></li>
                </ul>
            </li>
            <li class="nav-list-item"><a href="">订阅</a></li>
        </ul>
    </nav>

    <script type="text/javascript">
        var btn = document.querySelector('.menu-btn-icon');
        var menu = document.querySelector('.nav-container-list');
        var menuIsCollapse = false;

        btn.onclick = function () {
            menuIsCollapse = !menuIsCollapse;
            if (menuIsCollapse) {
                menu.style.display = 'none';
                btn.classList.remove('btn-icon-close');
                btn.classList.add('btn-icon-menu');
            } else {
                menu.style.display = 'block';
                btn.classList.remove('btn-icon-menu');
                btn.classList.add('btn-icon-close');
            }
        }
    </script>
</body>
</html>

代码摘抄自《高性能响应式web开发》