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. mysql，主键与索引的区别和联系

    关系数据库依赖于主键,它是数据库物理模式的基石.主键在物理层面上只有两个用途: 惟一地标识一行. 作为一个可以被外键有效引用的对象. 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成 ...

  2. html5 一些好用的原生事件

    计算机技术发展这么多年, 有些方面太老了,不适合新时代的发展, 使用新的规范,更方便开发和使用, 提高各方使用人的工作效率, 何乐而不为 drag drop html5新增属性 某些操作使用拖拽比较方 ...

  3. 吴裕雄--天生自然C语言开发：排序算法

    #include <stdio.h> void bubble_sort(int arr[], int len) { int i, j, temp; ; i < len - ; i++ ...

  4. F. Wi-Fi(线段树实现dp)

    题:http://codeforces.com/contest/1216/problem/F dp[i][0]:表示第i个位置不装的最小代价 dp[i][1]:表示第i个位置装的最小代价 T1的线段树 ...

  5. Django实现注册，往邮箱发送验证链接

    由于最近要做个平台,在GitHub上下载了一个系统框架,想着为了安全,实现注册时往一个邮箱发送注册信息,由管理员来确认是否同意其注册. 感谢博主:https://blog.csdn.net/geek_ ...

  6. Docker部署Python爬虫项目

    1) 首先安装docker: # 用 yum 安装并启动 yum install docker -y && systemctl start docker 2) 下载自定义镜像需要用到的 ...

  7. iOS燃烧动画、3D视图框架、天气动画、立体相册、微信朋友圈小视频等源码

    iOS精选源码 iOS天气动画,包括太阳,云,雨,雷暴,雪动画. 较为美观的多级展开列表 3D立体相册,可以旋转的立方体 一个仪表盘Demo YGDashboardView 一个基于UIScrollV ...

  8. [LC] 222. Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Note: Definition of a complete binary tree ...

  9. phpcms数组处理后键值插入（php自带库函数）和自己处理办法比较。

    phpcms处理: public function insert($data, $table, $return_insert_id = false, $replace = false) {  if(! ...

  10. Jeninks远程部署war包

    主体上看别人的脚本,然后和开发协商,做出符合自己的生产脚本................................ 脚本一: #!/bin/bash DATE=`date +%F-%H-%M` ...