响应式可弹出横向导航栏

最新推荐文章于 2023-02-20 17:32:03 发布

weixin_34241036

最新推荐文章于 2023-02-20 17:32:03 发布

阅读量492

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000015799366

版权

响应式可弹出横向导航栏的特点

在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在PC端时导航栏的内容可以通过bars来显示和隐藏，在移动端时也可以达到同样的效果。
效果如图所示：
图片描述

代码如下（html）：

<!DOCTYPE html>
<html>
    <head>
        <title>响应式菜单</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="demo1.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="bars active">
            <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>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
        
        <script type="text/javascript">
            $(".bars").click(function(){
                $(".bars").toggleClass("active");
                $(".nav").toggleClass("active");
            });
        </script>（控制鼠标点下时会显示的内容）
    </body>
</html>

body{
    margin:0;
    background:black;
}
.bars{
    width:60px;
    height:60px;
    background:white;
    position:fixed;
    top:0px;
    left:0px;
    cursor:pointer;
    z-index:1;
    border-right:1px solid rgba(0,0,0.2);
    
}
.bars span{
    display:block;
    width:30px;
    height:2px;
    background:#262626;
    position:absolute;
    top:calc(50% - 1px);
    left:calc(50% - 15px);
    
    transition:.2s;
}


.bars span:nth-child(1){
    transform:translateY(-10px);
}
.bars span:nth-child(3){
    transform:translateY(10px);
}
.bars.active span:nth-child(1){
    transform:translateY(0px) rotate(-45deg);（控制第一个span顺时针旋转45度）
}
.bars.active span:nth-child(3){
    transform:translateY(0px) rotate(45deg);（控制第三个span逆时针旋转45度）
}
.bars.active span:nth-child(2){
    transform:translateY(-100%);（控制第二个span隐藏）
    opacity:0;
}（这样就可以形成一个关闭图标）

.nav{
    height:60px;
    background:#fff;
    padding:0px;
    margin:0px;
    transition:.5s;
}
.nav.active{
    transform:translate(-100%);
    transition:.5s;
    
}
.nav ul{
    float:right;
    
    display:flex;（可以让父元素内的子元素排成一行）
    list-style:none;
    padding:0px 20px 0px 0px;
    margin:0px;
    
}
.nav ul li{
    border-right:1px solid rgba(0,0,0,.2);
}
.nav ul li:last-child{
    border-right:none;
}
.nav ul li a{
    line-height:60px;
    text-decoration:none;
    color:#262626;
    padding:0 20px;
    display:block;
}
.nav ul li a:hover{
    background:#262626;
    color:#fff;
}
(这里用媒体查询来实现响应式的效果)
@media screen and (max-width:640px){
    .nav{
        height:100vh;（指的是在手机上视口有多高，这个就有多高）
    }
    .nav ul{
        display:block;
        width:100%;
        text-align:center;
        padding:0px;
    }
    .nav ul li{
        border-right:none;
        border-bottom:1px solid rgba(0,0,0 .2);
    }

weixin_34241036

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
响应式可弹出横向导航栏

响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在PC端时导航栏的内容可以通过bars来显示和隐藏，在移动端时也可以达到同样的效果。效果如图所示：代码如下（html）：<!DOCTYPE html><html> <head> <...
复制链接

扫一扫