web--响应式导航菜单

levius 发布于2019-08-02 11:04 / 1594人阅读

摘要：响应式导航菜单代码如下代码响应式导航菜单首页导航产品新闻我们定义样式媒体查询屏幕宽度最大的时候执行里面的效果图

响应式导航菜单 代码如下 HTML代码：

定义样式：

*{
    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%);
}
/*媒体查询*/
        /*屏幕宽度最大570px的时候执行里面的css*/
@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);
    }
}

效果图：

GPU云服务器云服务器 jq响应式菜单响应式响应式布局响应式网站

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

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

web--响应式导航菜单

摘要：响应式导航菜单代码如下代码响应式导航菜单首页导航产品新闻我们定义样式媒体查询屏幕宽度最大的时候执行里面的效果图响应式导航菜单代码如下 HTML代码：响应式导航菜单首页 ...

Cc_2011 2019-08-29 16:12 评论0 收藏0
web--响应式导航菜单

摘要：响应式导航菜单代码如下代码响应式导航菜单首页导航产品新闻我们定义样式媒体查询屏幕宽度最大的时候执行里面的效果图响应式导航菜单代码如下 HTML代码：响应式导航菜单首页 ...

NickZhou 2019-08-23 10:28 评论0 收藏0
响应式布局入门之——侧栏菜单

摘要：年月初，中共中央国务院发布了关于构建和谐劳动关系的意见，明确提出切实保障职工休息休假的权利，完善并落实国家关于职工工作时间全国年节及纪念日假期带薪年休假等规定。下一步要抓好这项工作的落实。一直以来响应式布局都是利用的bootstrap来做，但是在手机上浏览的话，bootstrap样式文件还是有点大 118k，如果再用上一些js库的话，上个几百k是轻轻松松了，这样一来用移动流量的话真的...

singerye 2019-08-30 12:44 评论0 收藏0
响应式布局入门之——侧栏菜单

摘要：年月初，中共中央国务院发布了关于构建和谐劳动关系的意见，明确提出切实保障职工休息休假的权利，完善并落实国家关于职工工作时间全国年节及纪念日假期带薪年休假等规定。下一步要抓好这项工作的落实。一直以来响应式布局都是利用的bootstrap来做，但是在手机上浏览的话，bootstrap样式文件还是有点大 118k，如果再用上一些js库的话，上个几百k是轻轻松松了，这样一来用移动流量的话真的...

AlphaWatch 2019-08-01 15:02 评论0 收藏0
响应式导航菜单（css+js）

摘要：响应式导航菜单先来看下效果图把当视口大于的时候，导航条会显示在外，当视口小于的时候，导航菜单需要隐藏起来代码如下响应式首页产品购买服务联系代码如下持续更新，欢迎大家指教 1.响应式导航菜单先来看下效果图把：showImg(https://segmentfault.com/img/bVbecgx?w=1206&h=533); 当视口大于640px的时候，导航条会显示在外，当视口小于76...

CodeSheep 2019-08-29 16:06 评论0 收藏0