CSS+JS相应式导航菜单

printempw 发布于2019-08-29 16:07 / 544人阅读

摘要：响应式导航菜单响应式导航菜单就是当网页在其他不同视口的样式，不同的设备需要不同的样式需要掌握的知识掌握媒体查询，如果你不是很懂那就看我写的响应式布局掌握重的简单的方法下面是代码响应式菜单首页产品购买服务联系样式代

响应式导航菜单 响应式导航菜单就是当网页在其他不同视口的样式，不同的设备需要不同的样式 需要掌握的知识

-　掌握媒体查询，如果你不是很懂那就看我写的CSS响应式布局

掌握CSS重的display：none;

简单的JS方法

下面是HTML代码

CSS样式

*{
    margin:0;
    padding:0;
    text-decoration:none;
    list-style:none;
}
.nav{
    background:blue;
    width:100%;
    position:relative;
}
.pic{
    background:url(bottom.jpg) no-repeat;
    position:absolute;
    width:128px;
    height:46px;
    top:8px;
    left:60px;
}
.btn{
    font-size:20px;
    color:#fff;
    background:#13138a;
    display:none;
}
.btn i{
    padding:20px;
}
ul{
    margin-left:200px;
    
}
ul li{
    float:left;
}
ul li a:hover{
    background:pink;
}
ul li a{
    display:block;
    padding:20px 30px;
    color:#fff;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
@media screen and (max-width:768px){
    ul li{
        float:none;
        width:100%;
        text-align:center;
    }
    ul{
        width:100%;
        display:none;
        margin:0;
    }
    .btn{
        display:block;
    }
    .pic{
        left:50%;
        margin-left:-64px;
    }
}

js代码：

当视口大于768px的时候：

当视口小于768px的时候，导航菜单需要隐藏起来：

持续更新，欢迎大家指教

混合云云服务器 div+css导航菜单简单导航菜单 js js滚动导航菜单漂亮的导航菜单js

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

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

CSS+JS相应式导航菜单

摘要：响应式导航菜单响应式导航菜单就是当网页在其他不同视口的样式，不同的设备需要不同的样式需要掌握的知识掌握媒体查询，如果你不是很懂那就看我写的响应式布局掌握重的简单的方法下面是代码响应式菜单首页产品购买服务联系样式代响应式导航菜单响应式导航菜单就是当网页在其他不同视口的样式，不同的设备需要不同的样式需要掌握的知识 -　掌握媒体查询，如果你不是很懂那就看我写的CSS响应式布局掌握C...

Carl 2019-08-02 10:59 评论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
响应式导航菜单（css+js）

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

sanyang 2019-08-02 10:59 评论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