响应式导航菜单

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

需要掌握的知识

-　掌握媒体查询，如果你不是很懂那就看我写的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. Linux基础篇七：Linux的命令执行

    首选区分内置命令和外置命令: 内置命令:shell程序自带的命令,系统内核一启动就可以使用的命令 外置命令:在系统PATH变量路径下的命令 如何查看一个命令是内置命令还是外置命令: type -a c ...

  2. Apsara Clouder云计算专项技能认证：网站建设-简单动态网站搭建

    一.课程介绍 1.课程目标 了解静态网站和动态网站的区别 掌握动态网站的不同实现方式 在阿里云上如何搭建 wordPress网站以及 wordPress 网站的管理和优化 二.网站搭建的类型 1.网站 ...

  3. SPI以及IIC的verilog实现以及两者之间的对比

    一.SPI是一种常用的串行通信接口,与UART不同的地方在于.SPI可以同时挂多个从机,但是UART只能点对点的传输数据,此外SPI有四条线实现数据的传输,而UART采用的是2条实现串行数据的传输 1 ...

  4. 吴裕雄--天生自然python学习笔记：pandas模块强大的数据处理套件

    用 Python 进行数据分析处理,其中最炫酷的就属 Pa ndas 套件了 . 比如,如果我 们通过 Requests 及 Beautifulsoup 来抓取网页中的表格数据 , 需要进行较复 杂的 ...

  5. json转换为go类文件，js脚本，nodejs执行

    js写的代码生成脚本,json生成对应的go type对象 作json转换用 js脚本无甚何依赖,可以直接运行 执行前,按需更改文件 示例 var topname="Data"; ...

  6. “大屏，您好！” SONIQ声光揭新品“U•F•O”神秘面纱

    作为全球第一批做互联网智能电视的传媒企业,SONIQ声光于4月22日在中国大饭店举行了盛大的新品发布会.其中的重头戏就是当天发布会上作为先锋部队入驻中国电视市场的"UFO".笔者作 ...

  7. 【转】mac os x配置adb命令的方法，苹果电脑设置adb命令的方法

    http://www.myexception.cn/operating-system/1636963.html 步骤如下: 1. 启动终端Terminal (如果当前用户文件夹下已有.bash_pro ...

  8. 吴裕雄--天生自然python学习笔记：python爬虫与网页分析

    我们所抓取的网页源代码一般都是 HTML 格式的文件,只要研究明白 HTML 中 的标签( Tag )结构,就很容易进行解析并取得所需数据 . HTML 网页结构 HTML 网 页是由许多标签( Ta ...

  9. TOMCAT7不兼容spring boot 2.0

    找不到这个类,找不到那个类... Spring Boot 2.0 (and Spring Framework 5 upon which it builds) requires a Servlet 3. ...

  10. eclipse中maven项目failonmissingwebxml错误的修复(转)

    在使用eclipse创建maven项目的时候,有时候会出现这个问题: web.xml is missing and 'failOnMissingWebXml' is set to true我遇到这个问 ...