资讯专栏INFORMATION COLUMN

web--响应式导航菜单

Cc_2011 / 1460人阅读

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

响应式导航菜单 代码如下 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);
    }
}
效果图:

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

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

相关文章

  • web--响应导航菜单

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

    NickZhou 评论0 收藏0
  • web--响应导航菜单

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

    levius 评论0 收藏0
  • 响应布局入门之——侧栏菜单

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

    singerye 评论0 收藏0
  • 响应布局入门之——侧栏菜单

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

    AlphaWatch 评论0 收藏0
  • 响应导航菜单(css+js)

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

    CodeSheep 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<