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. 基础篇四：Ngnix安装

    然后直接 yum  install nginx 安装nginx

  2. Linux修改主机名称方法

    碰到这个问题的时候,是在安装Zookeeper集群的时候,碰到如下问题 java.net.UnknownHostException: XXXX Name or service not knownjav ...

  3. CLOUD列表字段数据汇总

  4. 《C Prime Plus》第八节笔记

    第八节 字符输入/输出和输入验证 8.1 单字符I/O:getchar()和putchar() getchar()和putchar()包含在stdio.h头文件中 8.2 缓冲区 无缓冲输入: 直接回 ...

  5. hibernate反向工程

  6. [LC] 541. Reverse String II

    Given a string and an integer k, you need to reverse the first k characters for every 2k characters ...

  7. vue element 关闭当前tab 跳转到上一路由

    方法一 this.$store.dispatch('delVisitedViews', this.$route); this.$router.go(-1); 方法二 this.$store.state ...

  8. 在mysql中生成数据库和数据表

    #创建数据库CREATE DATABASE s4day65 DEFAULT CHARSET utf8; #班级表 CREATE TABLE class (id INT NOT NULL AUTO_IN ...

  9. python语法基础-常用模块-长期维护

    ###############      常用模块   ################ # 常用模块: # 1,collections模块 # 2,时间模块,time模块,datatime模块 # ...

  10. idea 集成svn

    1.下载svn客户端 官网下载地址:https://tortoisesvn.net/downloads.html 2. 安装svn客户端 在安装svn客户端的时候一定要勾选,否则在idea上集成svn ...