响应式导航菜单

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

需要掌握的知识

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

  • 掌握CSS重的display：none;
  • 简单的JS方法

下面是HTML代码

<!doctype html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>响应式菜单</title>

    <link rel="stylesheet" type="text/css" href="demo01.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="btn">

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

        </div>

        <div class="pic"></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>

</body>

</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代码：

<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 ww=document.documentElement.clientWidth;

            if(ww>768){

                menu.style.display="block";

            }

        }

    }

</script>

当视口大于768px的时候：

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

持续更新，欢迎大家指教

CSS+JS相应式导航菜单的更多相关文章

  1. 响应式导航菜单（css+js）

    1.响应式导航菜单 先来看下效果图把: 当视口大于640px的时候,导航条会显示在外,当视口小于768px的时候,导航菜单需要隐藏起来!代码如下: <!doctype html> < ...

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

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

  3. 下拉的DIV+CSS+JS二级树型菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. python测试开发django-41.crispy-forms设计标签式导航菜单（TabHolder）

    前言 xadmin的详情页面主要是用form_layout布局,学会了完全可以不用写html代码,也能做出很好看的页面. xadmin的html页面是用的Bootstrap3框架设计的,layout布 ...

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

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

  6. js实现当前导航菜单高亮显示

    为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两 ...

  7. CSS实现弹出导航菜单

    查看实际效果:http://keleyi.com/a/bjac/vksd7321.htm 完整代码,保存在html文件打开也可看到效果: <!DOCTYPE html PUBLIC " ...

  8. 用js实现超链接导航菜单点击切换选中时的状态

    项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...

  9. javascript笔记09：javascript的下拉式导航菜单

    <!DOCTYPE html> <html> <body> <script> function hideAll() { for(i=0;i<odi ...

随机推荐

  1. K3CLOUD日志目录

    业务站点安装目录\K3Cloud\WebSite\App_Data\Log下面找

  2. AdminSwagger2Configuration

    package org.linlinjava.litemall.admin.config; import org.springframework.context.annotation.Bean; im ...

  3. 极简配置，业务上云只需 3min

    为了简化账号配置环节,实现本地一键开发部署,Serverless Framework 发布了微信扫码一键登录能力,支持用户在 Serverless Framework 环境扫码注册登陆,用户无需登录控 ...

  4. vs2015的密钥

    最近一直提示VS要登陆,登陆完就说评估期已到,搞得很烦. VS2015 enterprise版本得密钥:  HM6NR-QXX7C-DFW2Y-8B82K-WTYJV    亲测有效!!! 专业版本的 ...

  5. 谈谈有关 Python 的GIL 和 互斥锁

    转载:https://blog.csdn.net/Amberdreams/article/details/81274217 有 Python 开发经验的人也许听说过这样一句话:Python 不能充分利 ...

  6. docker启动遇到的问题

    转:https://blog.csdn.net/w1316022737/article/details/83692701 遇到问题: Job for docker.service failed bec ...

  7. 关于MyBatis的运行原理（转载）

    1.获取sqlSessionFactory对象: 解析文件的每一个信息保存在Configuration中,返回包含Configuration的DefaultSqlSessionFactory: 注意: ...

  8. LabVIEW的优点

    知道Labview的英文全称是什么吗?Labview的创始公司的名字是什么吗?哈哈,其实这就是NI(National Instruments)美国国家仪器公司创造Labview的初衷:代替传统测量仪器 ...

  9. C语言数据转换

    1.在我们编码的时候可能一个表达式中的数字类型是不同的,所以我们的首要的工作就是要把它们转换成相同的类型,然后在进行计算.这个转换的过程就就做隐式类型转换,完全由计算机完成. 2.隐式类型转换有一定的 ...

  10. Java IO: PipedInputStream

    原文链接 作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) PipedInputStream可以从管道中读取字节流数据,代码如下: 01 InputSt ...