响应式导航栏

小灰灰 2021-03-23 14:14 585阅读 0赞

## 响应式导航栏 ##

> 响应式导航栏就是在pc和在移动端的渲染形式不一样

### HTML代码如下： ###

<!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>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    </head>
    <body>
        <div class="bars">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">导航</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">我们</a></li>
            </ul>
        </div>
    </body>
    </html>

css样式

*{
        margin: 0;
        padding: 0;
    }
    body{
        background: #000;
    }
    ul{
        list-style: none;
    }
    a{text-decoration: none}
    .bars{
        width: 60px;
        height: 60px;
        background: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;  
    }
    .bars span{
        width: 30px;
        height: 2px;
        background: #000;
        position: absolute;
        left: calc(50% - 15px);
        top:calc(50% - 1px);
        transition: 0.1s;
    }
    .bars span:first-child{
        transform: translateY(-10px);
    }
    .bars span:last-child{
        transform: translateY(10px);
    }
    .bars.active span:first-child{
        transform: rotate(45deg);
    }
    .bars.active span:nth-child(2){
        transform: translateX(-100%);
        opacity: 0;
    }
    .bars.active span:last-child{
        transform: rotate(-45deg);
    }
    .nav{
    
        height: 60px;
        background: #fff;
        transition: .4s;
    }
    .nav ul{
        float: right;
        display: flex;
    }
    .nav ul li{
        border-right:1px solid rgba(0,0,0,.2);
        line-height: 60px;
    }
    .nav ul li:last-child{
        border: 0;
    }
    .nav ul li a{
        padding: 0 20px;
        display: block;
        color: #262626;
    }
    .nav ul li a:hover{
        background: #262626;
         color: #fff;
    }
    .nav.active{
        transform: translateX(-100%);
    }
    @media screen and (max-width:570px){
        .nav{
            height: 100vh;
        }
        .nav ul{
            width: 100%;
            display: inherit;
            text-align: center;
        }
        .nav ul li{
            border-bottom: 1px solid rgba(0,0,0,.2);
        }
    }

js代码如下

运行结果如下图

![图片描述][1395173304-5b5beb8449bc0_articlex]

### 技术要点： ###

*  媒体查询：当在手机的时候，需要先隐藏，点击的时候全部显示
 *  按钮的制作：用到了C3的动画
 *  运用到了js中的点击事件

## 持续更新，欢迎大家指教！ ##

[1395173304-5b5beb8449bc0_articlex]: /images/20210323/1616508869199.gif