响应式可弹出横向导航栏

entner 发布于2019-08-23 10:27 / 1225人阅读

摘要：响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在端时导航栏的内容可以通过来显示和隐藏，在移动端时也可以达到同样的效果。

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

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

代码如下（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);
    }

云服务器 GPU云服务器横向导航横向二级导航 html二级导航横向 html横向菜单导航

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96356.html

响应式可弹出横向导航栏

摘要：响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在端时导航栏的内容可以通过来显示和隐藏，在移动端时也可以达到同样的效果。响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在PC端时导航栏的内容可以通过bars来显示和隐藏，在移动端时也可以达到同样的效果。效果如图所示：showImg(https://segme...

Harriet666 2019-08-29 16:10 评论0 收藏0
响应式可弹出横向导航栏

摘要：响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在端时导航栏的内容可以通过来显示和隐藏，在移动端时也可以达到同样的效果。响应式可弹出横向导航栏的特点在排网页时响应式可弹出导航栏可以增加你网页的美观和可读性。在PC端时导航栏的内容可以通过bars来显示和隐藏，在移动端时也可以达到同样的效果。效果如图所示：showImg(https://segme...

chenatu 2019-08-02 11:04 评论0 收藏0
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️

响应式可过滤的游戏+工具展示页面用于各种网站以按类别对图像进行排序。在本文中，我将向您展示如何借助 HTML CSS 和 javascript 创建响应式可过滤的游戏+工具展示页面。可过滤作品集是一种流行的网络元素，可用于各种网站。它是一种作品画廊，大量作品整齐地排列在一起。值得注意的一点是，所有作品都可以在这里按类别排序。有一个导航栏，其中对所有类别进行了排序。单击这些类别中的任何一个时。...

Lavender 2021-09-06 15:00 评论0 收藏0
Python--Redis实战：第三章：Redis命令：第二节：列表

摘要：上一篇文章实战第三章命令第一节字符串下一篇文章实战第三章命令第三节集合在之前我们介绍过，的列表允许用户从序列的两端推入或者弹出元素获取列表元素以及执行各种常见的列表操作。上一篇文章： Python--Redis实战：第三章：Redis命令：第一节：字符串下一篇文章：Python--Redis实战：第三章：Redis命令：第三节：集合在之前我们介绍过，Redis的列表允许用户从序列...

superPershing 2019-07-30 18:02 评论0 收藏0