1.响应式导航菜单

先来看下效果图把：

当视口大于640px的时候，导航条会显示在外，当视口小于768px的时候，导航菜单需要隐藏起来！
代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width">

    <title>响应式</title>

    <link rel="stylesheet" type="text/css" href="demo1.css"/>

    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

</head>

<body>

    <div class="nav">

    <div class="pic"></div>

        <div class="btn">

            <i id="btn" class="fa fa-bars"></i>

        </div>

        <ul id="menu" class="clearfix">

            <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 type="text/javascript">

        var btn=document.getElementById("btn");

        var menu=document.getElementById("menu");

        btn.onclick=function(){

            if(menu.style.display=="block"){

                menu.style.display="none";

            }

            else{

                menu.style.display="block";

            }

            window.onresize=function(){

                var vw=document.documentElement.clientWidth;

                if(vw>640){

                menu.style.display="block"};

            }

        }

    </script>

</body>

</html>

css代码如下：

body{

    margin:0;

}

.nav{

    background-color:black;

    width:100%;

    position:relative;

}

.nav ul{

    margin:0;

    padding:0;

    width:80%;

    margin:0 auto;

}

.clearfix:after{

    display:block;

    content:"";

    height:0;

    clear:both;

    visibility:hidden;

}

.nav ul li{

    list-style:none;

    float:left;

}

.nav ul li a{

    color:white;

    padding:20px 30px;

    display:block;

    text-decoration:none;

}

.nav ul li a:hover{

    background-color:red;

}

.pic{

    background:url(logo.jpg) no-repeat;

    position:absolute;

    top:5px;

    left:5px;

    width:113px;

    height:39px;

}

.btn{

    background-color:#333;

    text-align:right;

    color:white;

    font-size:20px;

    padding:10px;

    display:none;

}

@media screen and (max-width:640px){

    .nav ul li{

        float:none;

        text-align:center;

    }

    .nav ul{

        width:100%;

    }

    .btn{

        display:block;

    }

    .pic{

        position:absolute;

        left:50%;

        margin-left:-56px;

    }

}

持续更新，欢迎大家指教！

响应式导航菜单（css+js）的更多相关文章

  1. BootStrap实现简单响应式导航菜单

    用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明.   先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...

  2. CSS+JS相应式导航菜单

    响应式导航菜单 响应式导航菜单就是当网页在其他不同视口的样式,不同的设备需要不同的样式 需要掌握的知识 - 掌握媒体查询,如果你不是很懂那就看我写的CSS响应式布局 掌握CSS重的display:no ...

  3. web--响应式导航菜单

    响应式导航菜单 代码如下 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  4. HTML5响应式导航

    HTML5响应式导航HTML5,响应式,jQuery特效,HTML5导航,HTML5响应式导航是一款基于HTML5实现的深灰色响应式导航菜单. 地址:http://www.huiyi8.com/sc/ ...

  5. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  6. CSS3 media queries + jQuery实现响应式导航

    目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM ...

  7. 15款帮助你实现响应式导航的 jQuery 插件

    对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

  8. Java程序员的日常 —— 响应式导航Demo

    这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果 代码 <!DOCTYPE html> <html> &l ...

  9. bootstrap固定响应式导航

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap. ...

随机推荐

  1. 吴裕雄--天生自然C语言开发：typedef

    #include <stdio.h> #include <string.h> typedef struct Books { ]; ]; ]; int book_id; } Bo ...

  2. okhttp 拦截问题

    builder.addInterceptor(chain -> { Request request = chain.request(); Response response = chain.pr ...

  3. 微软不将《帝国时代》终极版上架Steam的原因到底是什么？

    毋庸置疑的是,<帝国时代>绝对是一款经典游戏.作为一款RTS名作,在过去的20年时间中<帝国时代>销量超过2000万部.数以千万计的玩家都沉溺于这款游戏中,<帝国时代&g ...

  4. MergeSort（归并排序）原理及C++代码实现

    归并排序利用分治策略进行排序.原理如下 分解:分解待排的n个元素的序列成个具n/2个元素的两个子序列. 解决:使用归并排序递归地排序两个子序列. 合并:合并两个已排序的子序列以产生已排序的答案. 归并 ...

  5. ByteCode Instrumentation

    Bytecode Instrumentation 定义 我们首先来看看,什么叫"Instrumentation"?Instrumentation这个词有很多意思,在维基百科中,它是 ...

  6. HashMap相关知识

    HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道Hashtable和HashMap之间的区别,那么为何这道面试题如此 ...

  7. volatile、synchronized、ReentrantLock与CAS

    目录 一.JVM内存模型: 二.volatile关键字 1.volatile保证内存可见性. 2.能禁止指令重排序 3.不能保证原子性 三.synchronized关键字 1.内存可见性: 2.操作的 ...

  8. python运行报错——注释报错

    本人是IT行业的,从事软件测试,还是个菜鸟.希望大神们多多关照~ 首先,开通这个博客的目的: 1)通常我容易犯一些低级的错误,而且在网上找到解决方法,解决之后时间长了又不记得: 2)想和有共同兴趣的人 ...

  9. netty源码分析(十八)Netty底层架构系统总结与应用实践

    一个EventLoopGroup当中会包含一个或多个EventLoop. 一个EventLoop在它的整个生命周期当中都只会与唯一一个Thread进行绑定. 所有由EventLoop所处理的各种I/O ...

  10. Docker的自动构建镜像

    Dockerfile自动构建docker镜像类似ansible剧本,大小几kb手动做镜像:大小几百M+ dockerfile 支持自定义容器的初始命令 dockerfile主要组成部分: 基础镜像信息 ...