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. 3）PHP的http 并发

    详解浏览器最大并发连接数:http://www.iefans.net/liulanqi-zuida-bingfa-lianjieshu/ 并发连接数对浏览器加载速度的测试:http://www.ief ...

  2. spring cloud关于feign client的调用对象列表参数、设置header参数、多环境动态参数试配

    spring cloud关于feign client的调用 1.有些场景接口参数需要传对象列表参数 2.有些场景接口设置设置权限等约定header参数 3.有些场景虽然用的是feign调用,但并不会走 ...

  3. wireshark的过滤命令

    1.ip.addr == 192.168.1.1 这种是目标地址和源地址都是 后面指定的IP

  4. Number of Digit One(Medium)

    1.算法说明: 如3141592,在m(digitDivide)=100时,即要求计算百位上"1"的个数 其中a为31415,b为92,31415中出现了3142次"1& ...

  5. [LC] 13. Roman to Integer

    Roman numerals are represented by seven different symbols: I, V, X, L, C, Dand M. Symbol Value I 1 V ...

  6. JAVA单例模式的几种写法

    /** * 单例模式懒汉式(双重检锁线程安全.JDK1.5之后) */ public class Singleton { private static volatile Singleton singl ...

  7. excle导出、导入、下载_jeesite注解@ExcelField

    介绍:对Apache POI 3.9的简单封装,实现Excel的导出导入功能.使用Annotation定义导出导入字段. 优点:1.简单易用,支持大数量导出,配置简单,代码量少. 2.支持Excel ...

  8. Servlet的Cookie对象

    Cookie的介绍:Cookie 定义:Cookie 用于浏览器端的数据存储,解决了不同请求之间需要数据共享的问题.例如,可以将用户的登录信息接收并设置为Cookie,对其进行相关操作以使得用户在特定 ...

  9. 树剖想法题——BZOJ3626

    本来是打算作为树剖练习的最后一题的,结果一直WA. 本来以为是自己写的太丑. 最后发现5w的数据 我开了10w的数组 然而有一个数组要×2 哦,好棒棒. #include<cstring> ...

  10. getHibernateTemplate()的find用法大全

    一.find(String queryString); 示例:this.getHibernateTemplate().find("from bean.User"); 返回所有Use ...